效果：
官方文档示例
注解：
list-type：上传之后，图片的显示类型，有三种text、picture、picture-card。
--text类型显示为文本类型，预览时不能看到上传的图片
-- picture类型为长图片类型，预览时能够看到上传的图片
--picture-card类型是方图片类型，预览时能够看到上传的图片
limit 最大允许上传个数
accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效）
action 必选参数，上传的地址（后端提供上传的服务器地址）
headers 设置上传的请求头部（一般填token、orgid等身份校验信息，一般是保存在本地存储）
file-list 上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]
on-remove 文件列表移除文件时的钩子
on-success 文件上传成功时的钩子
on-preview 点击文件列表中已上传的文件时的钩子
<el-col :span="23">
<el-form-item label="图片:" prop="conTypeFiles">
<el-upload
ref="upload"
:class="{
'demo-httpRequestImg': conTypeFiles.length >= 3,
}"
list-type="picture-card"
:limit="3"
accept=".jpg,.jpeg,.png"
:action="uploadUrl"
:headers="headers"
:file-list="conTypeFiles"
:on-success="upLoadSuccess"
:on-remove="handleRemove"
:on-preview="handlePictureCardPreview"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</el-form-item>
</el-col>
import { getToken } from ‘@/utils/auth’
data() {
return {
// 图片上传成功弹窗
dialogVisible: false,
// 图片显示地址
dialogImageUrl: '',
// 上传文件的fileList
conTypeFiles: [],
// 请求头参数
headers: {
Authorization: 'Bearer ' + getToken(),
},
// 上传的服务器地址
uploadUrl: process.env.VUE_APP_BASE_API + '/file/upload',
uploadImage: uploadImg,
}}
请求头getToken相关的代码，仅供参考
auth.js
const TokenKey = 'Admin-Token';
export function getToken() {
return sessionStorage.getItem(TokenKey)
}
在封装axios的request.js文件中，request请求拦截器中的相关代码
import { getToken } from '@/utils/auth'
// request拦截器
service.interceptors.request.use(
config => {
if (getToken()) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token
}
return config
},
error => {
Promise.reject(error)
}
)
上传相关事件
/** 点击文件事件 -- 预览文件 */
handlePictureCardPreview(file) {
this.dialogVisible = true
this.dialogImageUrl = file.url
},
/** 文件列表移除文件时的钩子 */
handleRemove(file, fileList) {
this.conTypeFiles = fileList
},
/** 上传文件 */
upLoadSuccess(res, file, fileList) {
// console.log('upload----', res, file, fileList)
this.fileItem = res
this.fileItem.annexType = 0
this.fileItem.name = file.name
this.imgChange(res.data.fileName, res.data.fileUrl)
},
/** 图片地址转换 */
imgChange(fileName, fileUrl) {
this.$set(this.fileItem, 'url', fileUrl)
this.conTypeFiles.push(this.fileItem)
},
