效果：
vue封装上传接口：storage.js
import axios from 'axios'import { Message } from 'element-ui'const service = axios.create({baseURL: process.env.OS_API // api的base_url})service.interceptors.response.use(response => {return response}, error => {console.log('err' + error)// for debugMessage({message: '对象存储服务访问超时，请检查链接是否能够访问。',type: 'error',duration: 5 * 1000})return Promise.reject(error)})export function createStorage(data) {return service({url: '/storage/create',method: 'post',data})}}
需要使用图片上传的地方引用
import { createStorage } from '@/api/storage'
我使用的地方是在from中
<el-form-item label="文章展示图" prop="picture" style="width: 800px;"><el-uploadaction="#"list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="handleRemove":http-request="uploadAvatar":before-upload="beforeAvatarUpload":file-list="fileList"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></el-form-item>
data中
dialogImageUrl: '',dialogVisible: false,picList: [],fileList: []
方法区，包含了文件上传到服务器，展示大图，删除等功能
uploadAvatar(item) {const formData = new FormData()formData.append('file', item.file)const uid = item.file.uidcreateStorage(formData).then(res => {this.picList.push({ key: uid, value: res.data.data.url })this.emptyUpload()}).catch(() => {this.$message.error('上传失败，请重新上传')this.emptyUpload()})},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg'const isPng = file.type === 'image/png'const isLt2M = file.size / 1024 / 1024 < 2if (!isJPG && !isPng) {this.$message.error('上传图片只能是 JPG或png 格式!')}if (!isLt2M) {this.$message.error('上传图片大小不能超过 2MB!')}return (isJPG || isPng) && isLt2M},handleRemove(file, fileList) {for (const i in this.picList) {if (this.picList[i].key === file.uid) {this.picList.splice(i, 1)}}},handlePictureCardPreview(file) {this.dialogImageUrl = file.urlthis.dialogVisible = true},/*** 清空上传组件*/emptyUpload() {const mainImg = this.$refs.uploadif (mainImg) {if (mainImg.length) {mainImg.forEach(item => {item.clearFiles()})} else {this.$refs.upload.clearFiles()}}}
stringboot后台接收参数返回图片url即可
