本文實(shí)例為大家分享了vue+elementUI圖片上傳的具體代碼，供大家參考，具體內(nèi)容如下

1、html

<el-form-item label="圖片" prop="logo"> <el-upload name="file" v-if="optype==0"      :action="'/upload'"      accept=".jpg, .png"      list-type="picture-card"      :file-list="fileLists"      :on-preview="handlePictureCardPreview"      :on-success="success"      :on-remove="handleRemove">   <i class="el-icon-plus"></i> </el-upload> <!--大圖彈出框--> <el-dialog :visible.sync="imgDialogVisible" size="full" :modal="false" title="查看大圖片"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog></el-form-item>

2、定義

dialogImageUrl: '', imgDialogVisible: false, fileLists: [], 

3、在需要使用的方法中給fileLists[]賦值

vm.fileLists = [];if (row.logo != undefined && row.logo != "") { vm.fileLists.push({url:row.logo});}

4、其他幾個(gè)屬性的方法

//刪除圖片handleRemove(file, fileList) { this.form.logo=''},//查看大圖handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.imgDialogVisible = true;},//圖片上傳成功success(response, file, fileList) { this.fileLists = []; this.fileLists = [file] this.form.logo = file.response.result;},

5、圖片上傳的位置和路徑是存在不同的表中。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。