element 上传组件http-require(自定义上传文件)

最终实现的效果





注意！！！

属性action 就是平时我们上传图片填写的路径，如何想自定义上传，就可以用属性http-require 它可以覆盖默认上传，实现自定义上传。

html部分

<el-upload
        style="position:relative;"
        :class="{hide:hideUpload}"
        class="upload-demo upload-remove"
        action="/yxcAdmin/file/image/upload"
        :on-remove="doctorRemove"
        :before-upload="beforeAvatarUpload"
        :file-list="fileList"
        :limit="limit"
        :on-exceed="fileExceed"
        :on-success="handleSuccess"
        :http-request="httpRequest"
        list-type="picture-card">
    <el-button size="small" type="primary" class="uploadBtn">点击上传</el-button>
</el-upload>

js部分

// 上传图片前的拦截(这里限制图片的大小，如果要限制上传文件的类型也可在这设置)
beforeAvatarUpload(file) {
   // console.log(file)
    const isLt1M = file.size / 1024 / 1024 < 1;
    // console.log(file)
    if (!isLt1M) {
        this.$message.error('上传医院封面或图片大小不能超过 1MB!');
    }
    return isLt1M;
},
// 医院图片删除
doctorRemove(file, fileList){
    if (file && file.status==="success") {
        let imgKey = file.imgKey;
        let obj ={
            imgKey
        }
        let that = this;
        API.imageDelete(obj).then(function(result){
            if (result.status != "0") {
                that.$message.error({
                    showClose: true,
                    message: result.message.toString(),
                    duration: 2000
                });
                return false;
            }
            that.$message.success('图片删除成功!');
            that.pics.forEach((itemVal, indexVal)=>{
                if(itemVal == imgKey){
                    that.pics.splice(indexVal, 1)
                }
            })
            that.fileList.forEach((item, index)=>{
                if(item.imgKey == imgKey){
                    that.fileList.splice(index, 1);
                }
            })
            // console.log(that.pics)
        },function(error){
            that.$message.error(error.message)
        }).catch(function(err){
            that.$message.error({
                showClose: true,
                message: err.message.toString(),
                duration: 2000
            });
        })
    }
},
 // 限制医院图片个数
fileExceed(file, fileList){
    var length = fileList.length;
    if(length = this.limit){
        this.$message({
            message: '最多只能添加四张图片!',
            type: 'warning'
        });
    }
    return length;
},
//医院图片上传
httpRequest(option){
    let that_vue1 = this;
    let file = option.file;
    // console.log(file)
    let reader = new FileReader();
    let imgResult = "";
    reader.readAsDataURL(file);
    reader.onload = function() {
        imgResult = reader.result;
        // console.log(imgResult)
        let base64 = imgResult.substring(imgResult.indexOf(',')+1);
        let obj={
            nameSpace: 10,
            imgBase64: base64
        }
        // console.log(obj);
        let that_vue2 = that_vue1;
        API.imageUpload(obj).then(function(result){
                // console.log(result)
                if (result.status != "0") {
                    that_vue2.$message.error({
                        showClose: true,
                        message: result.message.toString(),
                        duration: 2000
                    });
                    return false;
                }
                // console.log(that_vue2)
                that_vue2.pics.push(result.data.imgKey);
                that_vue2.fileList.push({
                    name:file.name,
                    url: result.data.imgUrl,
                    imgKey: result.data.imgKey,
                    size:file.size
                });
                that_vue2.$message.success("图片上传成功");
                // console.log(that_vue2.fileList)
                // console.log(that_vue2.pics)
            }
        ).catch(function(err){
            that_vue2.$message.error({
                showClose: true,
                message: err.message.toString(),
                duration: 2000
            });
        })
    };
    reader.onerror = function(error) {
        reject(error);
    };
},

这里使用的是base64的形式上传图片的，也可以使用FormData上传文件

httpRequest(option){
	let file = option.file;
	let formData = new FormData();
	formData.append('file', file);
	API.imageUpload(formData).then().catch();
}