效果:

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 debug
    Message({
      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-upload
                 action="#"
                 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.uid
          createStorage(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 < 2

          if (!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.url
          this.dialogVisible = true
        },
        /**
         * 清空上传组件
         */
        emptyUpload() {
          const mainImg = this.$refs.upload
          if (mainImg) {
            if (mainImg.length) {
              mainImg.forEach(item => {
                item.clearFiles()
              })
            } else {
              this.$refs.upload.clearFiles()
            }
          }
        }

stringboot后台接收参数返回图片url即可

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐