<el-form-item label="图片1" prop="img1"> <el-input v-model="dataForm.img1" placeholder="图片1"></el-input> <el-upload class="upload-demo" :action="imgUrl" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList1" :on-success="doc1" :on-error="handleAvatarError"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item> <el-form-item label="图片2" prop="img2"> <el-input v-model="dataForm.img2" placeholder="图片2"></el-input> <el-upload class="upload-demo" :action="imgUrl" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList2" :on-success="doc2" :on-error="handleAvatarError"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item> <el-form-item label="图片3" prop="img3"> <el-input v-model="dataForm.img3" placeholder="图片3"></el-input> <el-upload class="upload-demo" :action="imgUrl" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList3" :on-success="doc3" :on-error="handleAvatarError"> <el-button size="small" type="primary">点击上传</el-button> </el-upload>
export default {
data () {
return {
fileList1: [],
fileList2: [],
fileList3: [],
imgUrl: ‘http://127.0.0.1:8080/renren-fast/uploads/local‘,
handleAvatarError(res, file) {
this.$message.error(‘文件太大‘);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
doc1(res, file) {
this.$message({
message: ‘上传成功‘,
type: ‘success‘
});
if (res.code == 0) {
this.dataForm.img1 = res.msg;
}
},
doc2(res, file) {
this.$message({
message: ‘上传成功‘,
type: ‘success‘
});
if (res.code == 0) {
this.dataForm.img2 = res.msg;
}
},
doc3(res, file) {
this.$message({
message: ‘上传成功‘,
type: ‘success‘
});
if (res.code == 0) {
this.dataForm.img3 = res.msg;
}
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }?`);
},