vue上传图片

<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 }?`);
            },

 

vue上传图片

上一篇:【原创】利用C++ RAII技术自动回收堆内存


下一篇:java.lang.OutOfMemoryError及解决方案