• 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 }?`);
                },
  • 相关阅读:
    G
    ZOJ 3782
    23.内存池
    22.boost图模板
    21.boost Ford最短路径算法(效率低)
    20.boost dijkstra最短路径算法
    19.boost A*算法
    18.boost 图的拓扑排序
    17.广度优先遍历bfs
    16.boost图深度优先遍历DFS
  • 原文地址:https://www.cnblogs.com/a1304908180/p/14948750.html
Copyright © 2020-2023  润新知