Avue2图片上传使用object对象模式时，axios的请求模式用post还是get？

Upload对象如下：

javascript 复制代码

/**
 * 上传附件
 * @param {*} vueObj
 * @param {*} row
 * @returns
 */
export const uploadOnlyOption = (vueObj, row) => {
  return {
    tip: true,
    // border: true, //显示边框
    labelWidth: 120, //操作菜单栏的宽度
    span: 12,
    submitBtn: false,
    emptyBtn: false,
    menuBtn: false,
    detail: false,
    column: [
      {
        row: true,
        span: 24,
        label: "结账附件",
        prop: "checkout_attachment",
        type: "upload",
        listType: "picture-card",
        // listType: "text",
        // dragFile: true, //拖拽上传
        accept:
          "image/png, image/jpeg, image/gif, application/pdf,application/x-zip-compressed,.rar,application/x-rar-compressed,application/x-7z-compressed,application/x-bzip,application/x-bzip2",
        limit: 10,
        fileSize: 10000,
        dataType: "object",
        span: 24,
        fileText: "选择附件",
        loadText: "上传附件中...",
        props: {
          label: "name",
          value: "url",
        },
        propsHttp: {
          res: "data",
          // home: "domain",
          name: "name",
          url: "url",
        },
        canvasOption: {
          text: "  ",
          ratio: 0.3,
        },
        tip: "上传"jpg/png/pdf/压缩包"格式的文件，最多10个，且不超过10M，重新上传时请记住点击提交按钮保存！",
        action: vueObj.attachUploadUrl,
        uploadPreview: (file, column, done) => {
          let previewType = ["jpg", "jpeg", "gif", "bmp", "png"];
          let suffix = file.url.substring(file.url.lastIndexOf(".") + 1);
          if (previewType.includes(suffix.toLowerCase())) {
            done(); //默认执行预览
          } else {
            vueObj
              .$confirm("该文件无法预览，可以下载后查看。", "提示", {
                confirmButtonText: "下载",
                cancelButtonText: "取消",
              })
              .then(() => {
                vueObj.$downloadFile(file.url, file.name);
              })
              .catch(() => { });
          }
        },
      },
    ],
  };
};

dataType用object对象，支持name,url,label,value等多对象属性上传，方便后端数据存储。

上传操作方法如下：

javascript 复制代码

uploadRecordDetailError(error, column) {
  this.$message.error(error + "！");
 },
 uploadRecordDetailExceed(limit, files, fileList, column) {
     if (fileList.length >= limit) {
         this.$message.error(`上传文件数量不能超过${limit}个！`);
     }
 },
 uploadRecordDetailBefore(file, done, loading, column) {
     // console.log(file, column);
     let suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
     if (column.accept.indexOf(file.type) >= 0 || suffix.toLowerCase() == "rar") {
         done();
     } else {
         this.$message.error(`请先上传${column.accept}文件！`);
         loading();
     }
 },
 uploadRecordDetailAfter(res, done, loading, column, ) {
     // console.log(res, this.model);
     let uploadFile = {
         attachPath: res.url,
         attachName: res.name,
     };
     done();
     // this.$message.success("上传后的方法");
 },
 uploadRecordDetailDelete(file, column) {
     // console.log(file, column);
     return new Promise((resolved, reject) => {
         resolved("success");
     });
 },
 //下载附件
 downAttachFile(file) {
     this.$downloadFile(file.url, file.name);
 },

提交上传方法：

javascript 复制代码

 this.$confirm("是否上传!", "提示", {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
}).then((data) => {
    axios
        .post(this.checkoutUrl, {
            _csrf,
            id: this.mainData.id,
            checkout_attachment: this.mainData.checkout_attachment,
        }, )
        .then((res) => {
            if (res.status == 200 && res.data.code === 0) {
                this.$emit("reload");
                this.$message({
                    type: "success",
                    message: "上传成功!",
                });
                this.close();
            } else {
                this.$message({
                    type: "error",
                    message: "执行操作出错!",
                });
            }
        });
}).catch(() => {});

请注意，上述代码使用到的是axios.post，这样checkout_attachment以表单对象数据提交给后端，方面后续数据的存储使用。

不推荐的方式

使用axios.get方式的不便之处，当上传多个文件时，get方法会将checkout_attachment以string数组（array）方式上传，后端接收后需要额外转码才能存储在结构数据中，相比使用post麻烦。