之前做的图片上传需求是自动上传并且只带header,这次需要传参数给后台并且格式是formData,非自动上传,而是点击按钮上传,让我琢磨了半天。
需求图片如下
html代码如下
<div class="img-list">
<div class="img" v-for="(item,index) in imgList" :key="index">
<img :src="item" alt="">
<div>
<span></span>
<i @click="deleteImg(item)"></i>
</div>
</div>
<div style="clear:both;"></div>
</div>
<div class="upload-btn">
<div class="upload-left">
<input type="text" v-model="fileName" placeholder="请选择文件">
<el-upload
class="upload-demo"
:action="global"
:headers="headers"
:show-file-list="false"
:auto-upload="false"
ref="upload"
:data="resData"
:on-change="imgBroadcastChange"
:onSuccess="uploadSuccess"
>
<el-button size="small" type="primary" class="file-btn"><i class="file-icon"></i>
</el-button>
</el-upload>
</div>
<div class="upload-rig">
<el-button @click="startUpload()">开始上传</el-button>
</div>
<div style="clear:both;"></div>
</div>
:auto-upload="false" 取消自动上传,:headers="headers",
this.headers = {
"Content-Type": "multipart/form-data"
};设置header
js效果实现如下:
imgBroadcastChange(file, fileList){
// debugger
this.file = file.raw;
this.fileName = file.name;
},
uploadSuccess(res, file) {
},
startUpload(){
this.resData = {
uid: localStorage.getItem("uid"),//用户登录之后服务器返回的用户唯一uid
token: localStorage.getItem("token"),//用户登录之后服务器返回的标识用户的token,这两个值有的没有的可以不加
action:"uploadStationPictureUrl",
station_id:this.imgStationId,
};
const formData = new FormData();
formData.append("uid", this.resData.uid);
formData.append("token", this.resData.token);
formData.append("action", this.resData.action);
formData.append("station_id", this.resData.station_id);
formData.append('file', this.file);
this.$api({
method: "post",
url: "/api.php/DeviceManage/index",
data: formData,
})
.then(su => {
if (su.data.code == 1) {
this.$TyMessage.success("上传成功");
this.imgList.push(su.data.picture_url);
} else if (su.data.code == 300) {
this.$router.push("/login");
this.$TyMessage.error(su.data.message);
} else {
this.$TyMessage.error(su.data.message);
}
})
.catch(err => {});
},
在change函数中把file.raw存储下来,用于点击上传图片的时候传给后台,
const formData = new FormData();
formData.append("uid", this.resData.uid);
formData.append("token", this.resData.token);
formData.append("action", this.resData.action);
formData.append("station_id", this.resData.station_id);
formData.append('file', this.file);
将数据格式转换成formData格式。