第一种使用方式
上传一张图片,带参数,图片是已二进制的形式发送的
<template>
<div>
<el-upload
class="avatar-uploader"
action="/MicroShopManageGoods/AddPicInfo" //请求接口 POST请求
:show-file-list="false"//显示上传列表
multiple //支持多选
:data="{ goodsID: goodsID }" //上传时附带的额外参数
:on-progress="progress"// 上传图片时的钩子
:on-success="onsuccess"//上传图片成功时
:on-error="onerror" //上传图片发生错误
list-type="picture-card" //显示省略图
>
<i class="el-icon-plus"></i> //图标
</el-upload>
<div class="loading" v-loading="loading"></div>//转圈效果
</div>
</template>
<script>
export default {
methods:{
progress() {
this.loading = true;
this.$message({
message: '上传图片中',
});
},
onsuccess() {
this.loading = false;
this.$message.success({
message: '图片上传成功',
});
this.$emit('imgAddSuccess', this);
},
onerror() {
this.loading = true;
this.$message.error({
message: '图片上传失败,请联系管理员',
});
},
}
}
</script>
上传多张图片,带参数,请求一次接口
shopping-putaway-edit-module.vue
<!-- 图片 -->
<div class="title">商品图片</div>
<div class="title" style="border-bottom: none">
<el-upload
list-type="picture-card" //显示的方式
class="upload-demo"
ref="upload" //定义个ref,通过ref触发提交
action="/MicroShopManageGoods/AddGoods" //这里已经无用,因为用了 `:http-request`
//当在方法内触发this.$refs.upload.submit()时就会触发uploadFile方法
:http-request="uploadFile"
:on-preview="handlePictureCardPreview" //图片放大
:auto-upload="false" //关闭自动提交
:multiple="true" //支持多选
:on-change="submit" // 文件发生增加的时候触发
:on-remove="handleRemove" //移除图片时触发的事件
>
<i slot="trigger" class="el-icon-plus"></i>// element图标
</el-upload>
//放大图片
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
<script>
export default {
methods:{
// 文件上传
uploadFile(file) {
this.fileData.append('file', file.file);
}, // 文件删除
handleRemove(file, fileList) {
console.log(file, fileList);
this.fileData = null;
this.fileData = new FormData();
fileList.forEach((element) => {
this.fileData.append('file', element);
});
//删除文件时,先清空之前有的数据,因为删除文件不会触发submit的事件,
//而再增加文件时会触发submit事件,所以如果不清空this.fileData,那删除文件根本没有用处,
/*这里的操作是:
1.先清空this.fileData
2.再new一个formData对象,
3.获取到删除文件是的fileList文件数组,
4.循环每一个fileList内的file文件出来,再append增加到fileData
5.再执行一次提交,发送事件出去
*/
this.submit();
},
// 把file文件已formdata的格式放进去,发送事件出去
async submit() {
this.fileData = new FormData();
this.$refs.upload.submit();
this.$emit('submit', this.fileData);
},
}
}
</script>
shopping-putaway.vue
<template>
<shopping-putaway-edit-module @submit="submit" />
</template>
<script>
import shoppingPutawayEditModule from './shopping-putaway-edit-module';
export default {
name: 'shopping-putaway',
components: {
shoppingPutawayEditModule,
},
data() {
return {
fileData: null,
};
},
methods:{
// 确定上架 //发送请求
async putawayShopping(val) {
/* 这里的val 数据是这样:
{
goodsIntroduction: "这是新的商品"
goodsName: "商品1"
pickTime: "2020/11/6 14:24:54"
price: 99
__proto__: Object
}
*/
if (this.fileData) {
//如果子组件没有选择照片的话,这里的this.fileData会是null,则走else
//不为null就把另一个组件的获取到的对象,key:value的形式放进去this.fileData
for (let key in val) {
this.fileData.append(key, val[key]);
}
this.$message.warning({
message: '发布中,请稍等~',
});
const res = await this.$api.post_MicroShopManageGoods_AddGoods(
this.fileData,
);
if (res.error_code === 0) {
this.$message.success({
message: res.msg,
});
} else {
this.$message.error({
message: res.msg,
});
return;
}
} else {
this.$message.error({
message: '图片不能为空',
});
return;
}
},
/*
这里是通过子组件传过来的方法,由于是子组件增/删图片会触发这个事件,
所以到这里的时候会复制给this.fileData
*/
async submit(fileData) {
this.fileData = fileData;
},
}
}
</script>