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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。