1. 开发环境 vue+element
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们会遇到上传文件的操作, 上面我来分享一下 vue+element 怎么实现, 心愿对你有所帮忙。
4. 废话不多说, 间接上代码:
<el-upload list-type="picture-card" :on-success="uploadsuccess" :action="uploadurl">
<i slot="default" class="el-icon-plus">
</i>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in">
</i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
<i class="el-icon-download">
</i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete">
</i>
</span>
</span>
</div>
</el-upload>
5. 在 return 中增加:
// 头像上传文件
files: "",
// 图片上传地址
uploadurl: process.env.VUE_APP_BASE_URL + "/api/account/coconfig",
dialogImageUrl: "",
dialogVisible: false,
disabled: false,
6. 在 methods 中增加如下代码:
handleRemove(file) {console.log(file);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleDownload(file) {console.log(file);
},
// 图片上传胜利的回调函数
uploadsuccess(response, file, fileList) {// console.log(response);
console.log(file);
// console.log(fileList);
// 存储 上传图片的 url
// this.files = file;
this.files = file.raw;
},
7. 数据申请代码:
accountcoconfig() {let formData = new FormData();
const param = {
account: this.$store.state.account,
nickname: this.form.Companynickname,
address: this.form.Correspondenceaddress,
contact: this.form.linkman,
contactInfo: this.form.contactway,
remark: this.form.Introductiontothe,
email: this.form.email,
};
formData.append("param", JSON.stringify(param));
formData.append("file", this.files);
console.log(formData);
accountcoconfig(formData).then((res) => {console.log(res);
});
},
8. 传参成果
9. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。