使用elementui + axios上传图片踩过的坑

1.先了解一下axios

axios中文文档介绍：http://www.axios-js.com/zh-cn/docs/

执行 GET 请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

// 上面的请求也可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

执行 POST 请求

axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

执行多个并发请求

function getUserAccount() {
return axios.get('/user/12345');
}

function getUserPermissions() {
return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));

axios API

可以通过向 axios 传递相关配置来创建请求

// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});

// 获取远端图片
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
})
.then(function(response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

2.在elementui中使用axios

 elementui中使用axios，需要在文件中导入

import axios from 'axios'

3.具体使用场景中遇到的问题以及如何解决

目录

1.先了解一下axios

axios API

2.在elementui中使用axios

3.具体使用场景中遇到的问题以及如何解决

---

我的项目中需要在el-form中提交表单的时候将数据先添加，并返回当前添加这条数据的id，再将多个图片上传保存到另一张表中。

<el-form  :model="addForm" label-width="90px" :rules="addFormRules" ref="addForm" >
    <el-form-item prop="reportContent" label="内容" >
        <el-input v-model="addForm.reportContent"
                  placeholder="请输入内容"
                  class="xf-el-input" type="textarea" :autosize="{ minRows: 2, maxRows: 50 }" ></el-input>
    </el-form-item>
    <el-form-item prop="repairPeople" label="人">
        <el-input type="text" v-model="addForm.repairPeople"  auto-complete="off" class="xf-el-input" disabled></el-input>
    </el-form-item>
    <el-form-item label="照片" prop="photo">
        <el-upload
                ref="uploadFile"
                action=""
                :auto-upload="false"
                accept="image/jpeg,image/jpg,image/png"
                list-type="picture-card"
                :before-upload="beforeUploadPicture"
                :on-preview="handlePictureCardPreview"
                :on-progress="uploadProgress"
                :on-remove="handleRemove"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :show-file-list="true"
                :on-change="handleChange"
                :file-list="fileList"
        >
            <i class="el-icon-plus"></i>
        </el-upload>
    </el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" align="center">
    <el-button @click.native="addFormVisible2 = false">取消</el-button>
    <el-button type="primary" @click.native="addSubmit(2)" :loading="addLoading">提交</el-button>
</div>

提交的代码（错误示例）

//新增添加
addReportWorkCopy(xfRepairProcessId,para){
    addReportWork(xfRepairProcessId,para).then(
        (res) => {
            if (this.fileList.length > 0){
                let reportworkId = res.body;
                let url = Utils.uriToUrl('/repairprocess-service/reportwork/upload_images/' + reportworkId);
                let formData = new FormData();
                this.fileList.forEach(item=>{
                    formData.append('file',item.raw,item.name);
                });
                axios({
                        method: 'post',
                        url: url,
                        headers:{'Content-Type': 'multipart/form-data',
                        "Authorization": "Bearer " +  sessionStorage.getItem("token")}}}
                        data: formData
                }).then((res)=>{
                    console.log(res.data);
                });
            }
            this.addLoading = false;
            this.$message({
                message: '添加成功',
                type: 'success'
            });
        },
    );
},

axios({
                        method: 'post',
                        url: url,
                        headers:{'Content-Type': 'multipart/form-data',
                        "Authorization": "Bearer " +  sessionStorage.getItem("token")}}}
                        data: formData
                }).then((res)=>{
                    console.log(res.data);
                });

上面代码是使用axios官方文档格式写的，但是到这以后前端报错，跨域问题，权限不通过，怎么试都不行，headers中把content-Type去掉，只留Authorization，可以解决跨域问题，但是后台报错上传的格式不是multipart，只留content-Type时，报跨域问题，两个都写上也是跨域问题。

于是修改成下面代码才可以使用。

//新增添加 
addReportWorkCopy(xfRepairProcessId,para){
    addReportWork(xfRepairProcessId,para).then(
        (res) => {
            if (this.fileList.length > 0){
                let reportworkId = res.body;
                let url = Utils.uriToUrl('/repairprocess-service/reportwork/upload_images/' + reportworkId);
                let formData = new FormData();
                this.fileList.forEach(item=>{
                    formData.append('file',item.raw,item.name);
                });
                axios.post(url,formData,{headers: {'Content-Type': 'multipart/form-data',
                        "Authorization": "Bearer " +  sessionStorage.getItem("token")}}).then((res)=>{
                    console.log(res.data);
                });
            }
            this.addLoading = false;
            this.$message({
                message: '添加成功',
                type: 'success'
            });
 
        },
    );
},