vue

处理多个图片

<el-form-item label="封面图" prop="pic" :rules="[{ required: true, message: '请传入封面图', trigger: 'blur' }]">
                    <div class="pic-upload mini-upload">
                        <el-upload action="/admin/up/temp" accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG" ref="uploadFilePic" style=" 80px; height: 80px" list-type="picture-card" name="upfile" :data="{ type: 'image' }" :before-upload="beforeUpload" :file-list="fileList" :on-success="uploadFile.bind(null, { name: 'pic' })">
                            <i class="el-icon-plus" ref="uploadPic"></i>
                            <div slot="file">
                                <el-image class="el-upload-list__item-thumbnail" :src="editform.xcx_pic_url" ref="pic" :preview-src-list="[editform.pic_url]"></el-image>
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePreview({ ref: 'pic' })">
                                        <i class="el-icon-zoom-in scale-icon"></i>
                                    </span>
                                    <span class="el-upload-list__item-delete" @click="removeFile({ name: 'pic', ref: 'uploadFilePic' })">
                                        <i class="el-icon-delete scale-icon"></i>
                                    </span>
                                    <div class="upload-list__item-change" @click="replaceFile({ name: 'pic', ref: 'uploadPic' })">点击替换</div>
                                </span>
                            </div>
                        </el-upload>
                    </div>
                    <div class="el-upload__tip">图片大小不超过2MB</div>
                </el-form-item>

  //展示图片
        handlePreview(data) {
            this.$refs[data.ref].clickHandler();
        },
        //上传前
        beforeUpload(file) {
            const isSize = file.size / 1024 / 1024 < 2;
            if (!isSize) {
                this.$message.error('上传图片大小不能超过2MB');
            }
            return isSize;
        },
        //成功上传文件
        uploadFile(data, res, file) {
            this.editform[data.name] = res.path;
            this.editform[data.name + '_url'] = res.url;
        },
        //删除图片
        removeFile(data) {
            this.editform[data.name] = '';
            this.editform[data.name + '_url'] = '';
            this.$refs[data.ref].clearFiles();
        },
        //替换图片，触发input
        replaceFile(data) {
            this.$refs[data.ref].click();
        },