HTML是这样的

<el-upload
	ref="options"
    action="#"
    :limit="1"
    :http-request="requestUpload"
    :show-file-list="false"
    :before-upload="beforeUpload"
 >
   <el-button size="small">
        选择
      <i class="el-icon-upload el-icon--right"></i>
   </el-button>
</el-upload>
<el-button
    style="float: right"
    type="primary"
    size="small"
    @click="uploadImg()"
    >提 交</el-button
>

JS是这样的

// 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.msgError("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.options.img = reader.result;
          this.file_name = file;
        };
      }
    },
    // 上传图片
    uploadImg() {
      if (this.file_name) {
        let fileFormData = new FormData();
        fileFormData.append("file",this.file_name);
        //append是追加或者新增的意思,里面的参数以键值对的形式 照片名=>照片就可以了
        carousel(fileFormData).then((response) => {
          console.log(response);
          if (response.code == 200) {
            this.open = false;
            this.$emit('byval' , response.data);
          }else{
            this.msgError(response.msg);
          }
        });
      } else {
        this.msgError("请上传图片类型,如:JPG,PNG后缀的文件");
      }
    },

其实上面这样就可以了,不过要是想改变Content-Type

// 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.msgError("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.options.img = reader.result;
          this.file_name = file;
        };
      }
    },
    // 上传图片
    uploadImg() {
      if (this.file_name) {
        let fileFormData = new FormData();
        fileFormData.append("file",this.file_name);
        let requestConfig = {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        };
        carousel(fileFormData,requestConfig).then((response) => {
          if (response.code == 200) {
            this.open = false;
            this.$emit('byval' , response.data);
          }else{
            this.msgError(response.msg);
          }
        });
      } else {
        this.msgError("请上传图片类型,如:JPG,PNG后缀的文件");
      }
    },

封装的接口是这样的

export function carousel(data,item) {
  return request({
    url: '我是接口',
    Headers:item,
    method: 'post',
    data: data
  })
}

原文

Logo

前往低代码交流专区

更多推荐