element-ui upload上传非图片文件显示自定义图标

vue2 + element-ui upload上传非图片文件显示自定义图标

---

提示：这里是配合jQuery进行使用的，因为要修改dom，img的src，如没有安装jQuery请自行安装。

应用场景：包含新增提交、编辑回显提交场景,实例中使用的上传列表回显模式为照片墙模式:list-type=“picture-card”,效果图在最下面。

一、新增场景

解释：新增场景不需要考虑编辑时文件、图片回显操作，仅处理上传成功后图标替换即可。

代码如下（示例）：

1. html代码

<el-upload class="upload-demo" ref="upload" :action="'替换为你的上传地址'"
	:data="{token: '如果需要token，替换为你的token，当然也可以新增其他参数'}" 
	:on-success="handleSuccess" list-type="picture-card"
>
	// 上传icon	
    <i class="el-icon-plus"></i>
    //插槽，自定义鼠标经过显示的按钮
    <div slot="file" slot-scope="{file}">
        <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
        >
        <span class="el-upload-list__item-actions">
        	//预览操作
            <span
                class="el-upload-list__item-preview"
                @click="handlePvew(file)"
            >
                <i class="el-icon-zoom-in"></i>
            </span>
            //删除操作
            <span
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
             >
                <i class="el-icon-delete"></i>
            </span>
        </span>
    </div>
</el-upload>

2. js代码(这里用到了jq，因为要修改dom，img的src)

//上传成功
handleSuccess(res,file,fileList){
    this.$nextTick(() => {
        $('.el-upload-list__item').each((index)=>{
        	//这里是根据文件名称来获取后缀名
            let fix =  fileList[index].name.split('.').pop()
            if (['png','jpg','jpeg',".gif",'PNG','JPG','JPEG',"GIF"].indexOf(fix) != -1) {
                // 如果是图片文件则不做处理
                return
            } else{
                $(`.el-upload-list__item-thumbnail:eq(${index})`).attr("src",'https://tool.fastadmin.net/icon/' + fix +'.png')
                // 这里也可以用本地图片 require('@/assets/fire/WORD.png')
            }
        });
    })
},
//预览文件预览
handlePvew(file){
    //拿到当前点击的文件，根据自己需求实现
},
//删除当前文件
handleRemove(file){
    let index = this.$refs.upload.uploadFiles.indexOf(file)
    this.$refs.upload.uploadFiles.splice(index, 1)
},
//提交时获取上传文件列表
submit() {
	//这里拿到所有回显的文件列表，并处理成逗号拼接字符串
    this.form.files = this.$refs.upload.uploadFiles.map(elem=>{
    	//我这里是使用的阿里oss上传，根据自己上传层级来
        return elem.response.code.fullurl
    }).join(',')
    //后续提交代码
    ...
}

二、编辑场景

代码如下（示例）：

1. data中定义fileList变量

data() {
	return {
		fileList: []
	}
}

2. 和新增一样，不过新加了一个file-list参数，用于回显

<el-upload class="upload-demo" ref="upload" :action="'替换为你的上传地址'"
	:data="{token: '如果需要token，替换为你的token，当然也可以新增其他参数'}" 
	:on-success="handleSuccess" :file-list="fileList" list-type="picture-card"
>
	// 上传icon	
    <i class="el-icon-plus"></i>
    //插槽，自定义鼠标经过显示的按钮
    <div slot="file" slot-scope="{file}">
        <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
        >
        <span class="el-upload-list__item-actions">
        	//预览操作
            <span
                class="el-upload-list__item-preview"
                @click="handlePvew(file)"
            >
                <i class="el-icon-zoom-in"></i>
            </span>
            //删除操作
            <span
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
             >
                <i class="el-icon-delete"></i>
            </span>
        </span>
    </div>
</el-upload>

3. js代码

代码如下（示例）：

// 请求数据详情接口，这里我把请求代码省略了，res.data.files就是请求来的文件数据
getDetail(){
	//请求成功后，拿到新增上传的files文件，因为新增时转成逗号拼接的字符串了，这里要再转成数组
    this.fileList = res.data.files.split(',').map(elem=>{
        return {
            url: elem
        }
    })
    // dom回显成功后，替换回显图标，和新增那块代码一样
    this.$nextTick(() => {
        $('.el-upload-list__item').each((index)=>{
        	//这里是根据文件路径来获取后缀名
            let fix =  this.$refs.upload.uploadFiles[index].url.split('.').pop()
            if (['png','jpg','jpeg',".gif",'PNG','JPG','JPEG',"GIF"].indexOf(fix) != -1) {
            	// 如果是图片文件则不做处理
                return
            } else{
                $(`.el-upload-list__item-thumbnail:eq(${index})`).attr("src",'https://tool.fastadmin.net/icon/' + fix +'.png')
                // 这里也可以用本地图片 require('@/assets/fire/WORD.png')
            }
        });
    })
},
// 上传成功
handleSuccess(res,file,fileList){
	// 这里需要处理fileList数组，因为回显时赋值的那个fileList里的url和新上传的fileList里的url层级不同
    let arr = fileList.map(elem=>{
        if(elem.response){
            return {
                url: elem.response.code.fullurl
            }
        }else{
            return {
                url: elem.url
            }
        }
    })
    this.$nextTick(() => {
        $('.el-upload-list__item').each((index)=>{
        	//这里使用的是arr，使用文件路径来获取后缀名
            let fix =  arr[index].url.split('.').pop()
            if (['png','jpg','jpeg',".gif",'PNG','JPG','JPEG',"GIF"].indexOf(fix) != -1) {
                // 如果是图片文件则不做处理
            } else{
                $(`.el-upload-list__item-thumbnail:eq(${index})`).attr("src",'https://tool.fastadmin.net/icon/' + fix +'.png')
                // 这里也可以用本地图片 require('@/assets/fire/WORD.png')
            }
        });
    })
},
// 提交操作
submit() {
	//同上，回显的fileList里的url和新上传的fileList里的url层级不同
    let arr = this.$refs.upload.uploadFiles.map(elem=>{
        if(elem.response){
            return elem.response.code.fullurl
        }else{
            return elem.url
        }
    })
    this.form.files = arr.join(',')
    //后续提交代码
    ...
},

提示：预览和删除操作，与新增场景一致。

效果图

vue2 + jQuery + element-ui upload上传非图片文件显示自定义图标详细教程。

1. 新增场景

2. 编辑场景

3. 预览场景

本文为本人原创，转载请注明出处!