在vue中用multipart/form-data方式上传文件

multipart/form-data方式上传文件

这里用iview的框架写

<Modal
        v-model="fileModel"
        title="导入文件" width="600" :mask-closable="false" >
	<Upload style="display: inline-block"
          :before-upload="handleUpload"
          action="//jsonplaceholder.typicode.com/posts/">
          <Button icon="ios-cloud-upload-outline">选择要导入的文件</Button>
	</Upload>
	<div v-if="file !== null">已导入的文件: {{ file.name }}</div>
	<div slot="footer">
          <Button @click="cancel">取消</Button>
          <Button type="primary" @click="ok">导入</Button>
	</div>
</Modal>

data中写：

uploadType:"aa",
      file: null,
      loadingStatus: false,
      fileModel: false,

方法：

ok() {
      if(this.file==null){
        return this.$Message.error('请先选择要导入的文件！');
      }else{
        let fileFormData = new FormData();
        fileFormData.append("file",this.file);
        fileFormData.append("source",this.uploadType);
        let token = window.localStorage.getItem("accessToken")
        axios({
          method: "POST",
          url: "/xxx/xxx",
          headers: {
            "Content-Type": "multipart/form-data",
            "accessToken":token //需要传token
          },
          data: fileFormData,
        })
          .then((res) => {
            if(res.success){
              this.$Message.success('成功！');
              this.fileModel=false;
            }
          })
          .catch((e) => {
            this.$Message.error(e);
          })
        }
    },