vue+el-upload组件封装（图片，文件上传至oss阿里云）

已于 2022-04-14 15:41:42 修改
阅读量1.4k 收藏 2
点赞数
文章标签： vue.js 阿里云 前端
于 2021-12-31 15:39:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41468247/article/details/122060362
版权

1、安装ali-oss

npm install ali-oss --save

2、oss方法封装

新建utils/ali-oss-upload.js文件（代码如下）

const OSS = require('ali-oss')

// 文档链接：https://help.aliyun.com/document_detail/32068.html?spm=a2c4g.11186623.6.1291.86b3c107IHjkTR
/**
 * 阿里 OSS 服务 OSS 对象
 * [accessKeyId] {String}：通过阿里云控制台创建的AccessKey。
 * [accessKeySecret] {String}：通过阿里云控制台创建的AccessSecret。
 * [stsToken] {String}：使用临时授权方式，详情请参见使用 STS 进行临时授权。
 * [bucket] {String}：通过控制台或PutBucket创建的bucket。
 * [endpoint] {String}：OSS域名。
 * [region] {String}：bucket所在的区域， 默认oss-cn-hangzhou。
 * [internal] {Boolean}：是否使用阿里云内网访问，默认false。比如通过ECS访问OSS，则设置为true，采用internal的endpoint可节约费用。
 * [cname] {Boolean}：是否支持上传自定义域名，默认false。如果cname为true，endpoint传入自定义域名时，自定义域名需要先同bucket进行绑定。
 * [isRequestPay] {Boolean}：bucket是否开启请求者付费模式，默认false。具体可查看请求者付费模式。
 * [secure] {Boolean}：(secure: true)则使用HTTPS，(secure: false)则使用HTTP，详情请查看常见问题。
 * [timeout] {String|Number}：超时时间，默认60s。
 */
const client = new OSS({
  region: '',
  accessKeyId: '',
  accessKeySecret: '',
  bucket: ''
})

/**
 * OSS 服务文件上传单个文件
 * 同步方式：基于 async 和 await 方式，异步编程同步化。
 * @param {String} objectName 可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
 * @param {file} file 本地文件或者文件路径
 */
export async function ossPut(objectName, file) {
  try {
    const result = await client.put(objectName, file)
    // console.log(result)
    return result
  } catch (error) {
    // console.log(error)
    return error
  }
}

/**
 * OSS 服务文件上传单个文件
 * 异步方式：API 接口返回 Promise
 * @param {String} objectName 可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
 * @param {file} file 本地文件或者文件路径
 */
export async function ossAsyncPut(objectName, file) {
  return new Promise((resolve, reject) => {
    client.put(objectName, file)
      .then(res => {
        resolve(res)
      })
      .catch(error => {
        resolve(error)
      })
  })
}

/**
 * OSS 服务文件下载单个文件
 * 同步方式：基于 async 和 await 方式，异步编程同步化。
 * @param {String} objectName
 */
export async function ossGet(objectName) {
  try {
    const result = await client.get(objectName)
    // console.log(result)
    return result
  } catch (error) {
    // console.log(error)
    return error
  }
}

/**
 * OSS 服务文件下载单个文件
 * 异步方式：API 接口返回 Promise
 * @param {String} objectName
 */
export async function ossAsyncGet(objectName) {
  return new Promise((resolve, reject) => {
    client.get(objectName)
      .then(res => {
        resolve(res)
      })
      .catch(error => {
        reject(error)
      })
  })
}

/**
 * OSS 服务文件删除单个文件
 * @param {String} objectName
 */
export async function ossDelete(objectName) {
  try {
    const result = await client.delete(objectName)
    return result
  } catch (error) {
    // console.log(error)
    return error
  }
}

3、组件封装

  1. 图片上传
    1） 涉及到图片转换的方法如下（utils/index.js）
/**
 * base64ToFileObject base64 码转 blob 二进制，再转 file 对象
 * @param  {[type]} base64 [base64码]
 * @param  {string} fileName [转码后 file 对象的名称]
 * @return {[type]} newFile[返回新的file对象]
 */
export function base64ToFileObject(base64, fileName = 'file') {
  const mime = base64.split(',')[0].match(/:(.*?);/)[1]
  base64 = base64.split(',')[1]
  base64 = window.atob(base64)
  const u8arr = new Uint8Array(base64.length)
  for (let i = 0; i < base64.length; i++) {
    u8arr[i] = base64.charCodeAt(i)
  }
  const blob = new Blob([u8arr], { type: mime })
  const suffix = mime.split('/')[1]
  return new File([blob], `${fileName}.${suffix}`, { type: mime })
}

/**
 * imgToBase64 压缩图片
 * @param  {[type]} file      [file对象 event.target.files[0]]
 * @param  {[type]} maxWidth  [最大宽度]
 * @param  {[type]} maxHeight [最大高度]
 * @return {[type]}           [description]
 */

export function imgToBase64(file, maxWidth, maxHeight) {
  return new Promise((resolve, reject) => {
    // 压缩图片需要的一些元素和对象
    const reader = new FileReader()
    const img = new Image()
    img.onload = function() {
      // 图片原始尺寸
      const originWidth = this.width
      const originHeight = this.height
      // 目标尺寸
      let targetWidth = originWidth
      let targetHeight = originHeight
      // 图片尺寸超过400x400的限制
      if (originWidth > maxWidth || originHeight > maxHeight) {
        if (originWidth / originHeight > maxWidth / maxHeight) {
          // 更宽，按照宽度限定尺寸
          targetWidth = maxWidth
          targetHeight = Math.round(maxWidth * (originHeight / originWidth))
        } else {
          targetHeight = maxHeight
          targetWidth = Math.round(maxHeight * (originWidth / originHeight))
        }
      }
      // 缩放图片需要的canvas
      const canvas = document.createElement('canvas')
      const context = canvas.getContext('2d')
      // canvas对图片进行缩放
      canvas.width = targetWidth
      canvas.height = targetHeight
      // 清除画布
      context.clearRect(0, 0, targetWidth, targetHeight)
      // 图片压缩
      context.drawImage(img, 0, 0, targetWidth, targetHeight)
      const base64 = canvas.toDataURL('image/jpeg', 0.8) // 压缩后质量
      // const base64 = canvas.toDataURL()
      // console.log(canvas.toDataURL());
      resolve(base64)
    }
    reader.onload = function(e) {
      img.src = e.target.result
    }
    reader.readAsDataURL(file)
  })
}

2）组件封装，新建uploadImg/index.vue文件，代码如下

<!--
 * @Description:图片上传
 * @Author: duyan
 * @Date: 2021-10-27 19:44:02
 * @LastEditTime: 2021-11-19 16:05:57
 * @LastEditors: duyan
-->
<template>
  <div class="uploadImg">
    <el-upload
      :class="(maxCount>imgLength)?'uploadImgContent':'uploadImgContentNone'"
      :file-list="value"
      :limit="maxCount"
      :drag="isDrag"
      :http-request="onUploadFile"
      :before-upload="handleBeforeUpload"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-error="handleError"
      v-bind="$attrs"
      action=""
      accept="image/png,image/jpg,image/jpeg"
      list-type="picture-card"
      v-on="$listeners"
    >
      <i slot="default" class="el-icon-plus"/>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" width="100%" append-to-body>
      <img :src="dialogImageUrl" height="100%" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { imgToBase64, base64ToFileObject } from '@/utils'
import { ossAsyncPut, ossDelete } from '@/utils/ali-oss-upload.js'
import { v4 as uuidv4 } from 'uuid'
export default {
  // 名字
  name: 'UploadImg',
  // 部件
  components: {
  },
  model: {
    prop: 'fileList'
  },
  // 静态
  props: {
    fileList: {
      type: Array,
      default: () => []
    },
    // 是否直接上传到 OSS 服务
    isPutOss: {
      type: Boolean,
      default: false
    },

    // 图片上传到 OSS 服务上的存储目录
    ossPathPrefix: {
      type: String,
      default: ''
    },
    // 图片上传数
    maxCount: {
      type: Number,
      default: 1
    },
    isDrag: {
      type: Boolean,
      default: false
    },
    // eslint-disable-next-line vue/require-default-prop
    uploadSuccess: Function,
    // eslint-disable-next-line vue/require-default-prop
    afterRead: Function
  },
  // 数据
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      imgLength: 0
    }
  },
  // 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  computed: {
    value: {
      get(val) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.imgLength = this.fileList.length
        return this.fileList
      },
      set(val) {
        this.imgLength = val.length
        this.$emit('input', val)
      }
    }
  },
  // 对象内部的属性监听，也叫深度监听
  watch: {
  },
  // 请求数据
  created() {
  },
  mounted() {
  },
  // 方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
    // 图片上传
    onUploadFile(file) {
      // 上传完成
      this.afterRead && this.afterRead(file)
      // 上传oss
      this.isPutOss && this.onUpload(file)
    },
    onUpload(file) {
      file.status = 'uploading'
      file.message = '上传中...'
      this.uploaded(file.file)
        .then(response => {
          const { url } = response
          file.url = url
          file.status = 'done'
          file.message = '上传成功'
          this.value.push(file)
          this.$emit('input', this.value)
          // this.uploadSuccess(file)
          this.$forceUpdate()// 强制渲染
        })
        .catch(() => {
          file.status = 'failed'
          file.message = '上传失败'
          file.url = null
          this.$forceUpdate()
        })
    },
    /**
     * 文件上传至阿里 OSS 服务
     */
    uploaded(file) {
      return new Promise((resolve, reject) => {
        const suffix = file.type.split('/')[1]
        const fileName = `${this.ossPathPrefix}/${uuidv4()}.${suffix}`
        ossAsyncPut(fileName, file)
          .then(({ res, url }) => {
            // console.log(res)
            // console.log(url)
            if (res && res.status === 200) {
              // console.log('上传成功')
              resolve({ res, url })
            } else {
              // console.log('上传失败')
              reject(new Error('图片上传 OSS 服务失败！'))
            }
          })
      })
    },
    // 图片从oss上删除
    _delete(file) {
      console.log(file)
      if (file.url) {
        const startIndex = file.url.indexOf(this.ossPathPrefix)
        const objectName = file.url.substr(startIndex)
        ossDelete(objectName).then(res => {
        })
      }
    },
    handleBeforeUpload(file) {
      return new Promise((resolve, reject) => {
        const fileType = ['image/png', 'image/jpg', 'image/jpeg']
        if (!fileType.includes(file.type)) {
          this.$notify.warning({
            title: '警告',
            message: '请上传格式为image/png, image/jpg, image/jpeg的图片'
          })
          reject()
        }
        // 图片压缩后校验图片大小
        imgToBase64(file, 800, 800).then(base64 => {
          const resultFile = base64ToFileObject(base64)
          const isNeed = resultFile.size / 1024 < 200
          // console.log(resultFile)
          // console.log(resultFile.type, isNeed)
          if (!isNeed) {
            this.$notify.warning({
              title: '警告',
              message: '图片过大'
            })
            reject()
          }
          resolve()
        })
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleRemove(file, fileList) {
      this.value = fileList
      this._delete(file)
      this.$forceUpdate()
    },
    handleError(err, file, fileList) {
      console.log('error:', err, file, fileList)
    }
  }
}
</script>

<style scoped lang="scss">
.uploadImg{
  .uploadImgContent{
    ::v-deep .el-upload{
      display: inline-block !important ;
    }
  }
  .uploadImgContentNone{
    ::v-deep .el-upload{
      display: none !important;
    }
  }
}
  ::v-deep .el-dialog{
    margin: 5vh 0 !important;
    background: none;
    .el-dialog__headerbtn .el-dialog__close {
      color: #dddddd;
      border: 3px solid #dddddd;
      border-radius: 50%;
      font-size: 28px;
    }
    .el-dialog__body{
      height: calc( 100vh - 20vh );
      overflow: hidden;
      padding:0px 10px 10px 10px;
      text-align: center;
    }
  }
</style>
  1. 文件上传封装
    1） 文件类型使用及判断见此处
    2） 新建uploadFile/index.vue文件，代码如下
<!--
 * @Description:文件上传
 * @Author: duyan
 * @Date: 2021-10-27 19:44:02
 * @LastEditTime: 2021-12-21 11:29:30
 * @LastEditors: duyan
-->
<template>
  <div class="uploadImg">
    <el-upload
      :class="(maxCount>imgLength)?'uploadImgContent':'uploadImgContentNone'"
      :file-list="value"
      :limit="maxCount"
      :drag="isDrag"
      :http-request="onUploadFile"
      :before-upload="handleBeforeUpload"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-error="handleError"
      v-bind="$attrs"
      :accept="fileType"
      :show-file-list="isShowFileList"
      action=""
      v-on="$listeners"
    >
      <div v-show="value.length<maxCount">
        <!-- 模板下载 -->
        <div v-if="templateDownload">
          <el-dropdown split-button type="success">
            <i class="el-icon-upload2"/>
            {{ btnLabel }}
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-download">
                <!-- <div style="display: inline-block; height:32px;width:100px;background-color:#11b95c;border:transparent;text-align:center;line-height:32px;border-radius:3px;"> -->
                <a :href="downloadUrl">下载导入模板</a>
                <!-- </div> -->
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div v-else>
          <el-button size="small" icon="el-icon-plus" type="primary">{{ btnLabel }}</el-button>
          <div slot="tip" class="el-upload__tip">只能上传{{ fileType }}文件</div>
        </div>
      </div>
    </el-upload>
  </div>
</template>

<script>
import { ossAsyncPut, ossDelete } from '@/utils/ali-oss-upload.js'
import { v4 as uuidv4 } from 'uuid'
export default {
  // 名字
  name: 'UploadImg',
  // 部件
  components: {
  },
  model: {
    prop: 'fileList'
  },
  // 静态
  props: {
    // 文件list
    fileList: {
      type: Array,
      default: () => []
    },
    // 是否直接上传到 OSS 服务
    isPutOss: {
      type: Boolean,
      default: false
    },

    // 文件上传到 OSS 服务上的存储目录
    ossPathPrefix: {
      type: String,
      default: ''
    },
    // 文件上传数
    maxCount: {
      type: Number,
      default: 1
    },
    isDrag: {
      type: Boolean,
      default: false
    },
    // 文件类型
    fileType: {
      type: String,
      default: () => '.pdf'
    },
    fileTypeList: {
      type: Array,
      default: () => {
        return ['application/pdf', 'application/doc', 'application/docx']
      }
    },
    // 按钮文字
    btnLabel: {
      type: String,
      default: '点击上传'
    },
    // 是否显示已上传文件列表
    isShowFileList: {
      type: Boolean,
      default: true
    },
    // 是否进行模板下载
    templateDownload: {
      type: Boolean,
      default: false
    },
    // 模板下载链接
    downloadUrl: {
      type: String,
      default: 'https://yzwy1-app.oss-cn-shenzhen.aliyuncs.com/communityModel.xlsx'
    },
    // eslint-disable-next-line vue/require-default-prop
    uploadSuccess: Function,
    // eslint-disable-next-line vue/require-default-prop
    afterRead: Function
  },
  // 数据
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      imgLength: 0
    }
  },
  // 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  computed: {
    value: {
      get(val) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.imgLength = this.fileList.length
        return this.fileList
      },
      set(val) {
        this.imgLength = val.length
        this.$emit('input', val)
      }
    }
  },
  // 对象内部的属性监听，也叫深度监听
  watch: {
  },
  // 请求数据
  created() {
  },
  mounted() {
  },
  // 方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
    // 文件上传
    onUploadFile(file) {
      // 上传完成
      this.afterRead && this.afterRead(file)
      // 上传oss
      this.isPutOss && this.onUpload(file)
    },
    onUpload(file) {
      file.status = 'uploading'
      file.message = '上传中...'
      this.uploaded(file.file)
        .then(response => {
          const { url } = response
          file.url = url
          file.status = 'done'
          file.message = '上传成功'
          file.name = file.file.name
          this.value.push(file)
          this.$emit('input', this.value)
          // this.uploadSuccess(file)
          this.$forceUpdate()// 强制渲染
        })
        .catch(() => {
          file.status = 'failed'
          file.message = '上传失败'
          file.url = null
          this.$forceUpdate()
        })
    },
    /**
     * 文件上传至阿里 OSS 服务
     */
    uploaded(file) {
      return new Promise((resolve, reject) => {
        const suffix = file.type.split('/')[1]
        const fileName = `${this.ossPathPrefix}/${uuidv4()}.${suffix}`
        ossAsyncPut(fileName, file)
          .then(({ res, url }) => {
            // console.log(res)
            // console.log(url)
            if (res && res.status === 200) {
              // console.log('上传成功')
              resolve({ res, url })
            } else {
              // console.log('上传失败')
              reject(new Error('文件上传 OSS 服务失败！'))
            }
          })
      })
    },
    // 文件从oss上删除
    _delete(file) {
      console.log(file)
      if (file.url) {
        const startIndex = file.url.indexOf(this.ossPathPrefix)
        const objectName = file.url.substr(startIndex)
        ossDelete(objectName).then(res => {
        })
      }
    },
    handleBeforeUpload(file) {
      return new Promise((resolve, reject) => {
        const fileType = this.fileTypeList
        // console.log('fileType----', fileType)
        // console.log('file----', file)
        if (!fileType.includes(file.type)) {
          this.$notify.warning({
            title: '警告',
            message: '请上传格式为' + this.fileType + '的文件'
          })
          reject()
        }
        resolve()
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleRemove(file, fileList) {
      this.value = fileList
      this._delete(file)
      this.$forceUpdate()
    },
    handleError(err, file, fileList) {
      console.log('error:', err, file, fileList)
    }
  }
}
</script>

<style scoped lang="scss">
.uploadImg{
  .uploadImgContent{
    ::v-deep .el-upload{
      display: inline-block !important ;
    }
  }
  .uploadImgContentNone{
    ::v-deep .el-upload{
      display: none !important;
    }
  }
}
  ::v-deep .el-dialog{
    margin: 5vh 0 !important;
    background: none;
    .el-dialog__headerbtn .el-dialog__close {
      color: #dddddd;
      border: 3px solid #dddddd;
      border-radius: 50%;
      font-size: 28px;
    }
    .el-dialog__body{
      height: calc( 100vh - 20vh );
      overflow: hidden;
      padding:0px 10px 10px 10px;
      text-align: center;
    }
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

4.引入使用

代码如下：

<!--
 * @Description:组件使用
 * @Author: duyan
 * @Date: 2021-12-20 10:37:07
 * @LastEditTime: 2021-12-31 15:30:11
 * @LastEditors: duyan
-->
<template>
  <div class="community-administrative">
    <!-- 上传本地返回 -->
    <div style="line-height:35px;">上传表格文件本地返回：</div>
    <upload-file
      :file-type="'.xls,.xlsx'"
      :file-type-list="['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','application/vnd.ms-excel']"
      v-model="fileListFile"
      :is-put-oss="false"
      :btn-label="downloadLabel"
      :max-count="1"
      :template-download="true"
      :is-show-file-list="false"
      :download-url="'模板下载链接'"
      :after-read="afterRead"/>
    <!-- 上传至oss返回 -->
    <div style="line-height:35px;">上传pdf文件至oss：</div>
    <upload-file
      :file-type="'.pdf'"
      :file-type-list="['application/pdf']"
      v-model="fileListPdf"
      :is-put-oss="true"
      :max-count="1"
      @input="uploadSuccess"/>
    <div style="line-height:35px;">上传图片文件至oss：</div>
    <upload-img v-model="fileList" :is-put-oss="true" :max-count="1" :oss-path-prefix="'yzsurvey_file/PC'" @input="uploadSuccess"/>
  </div>
</template>

<script>
import uploadFile from '@/views/components/uploadFile/index'
import uploadImg from '@/views/components/uploadImg/index'

export default {
  // 名字
  name: 'UploadFile',
  // 部件
  components: {
    uploadFile,
    uploadImg
  },
  // 静态
  props: {
  },
  // 数据
  data() {
    return {

      // word文件
      fileListFile: [],
      // word文件文本
      downloadLabel: '导入至本地文件及模板下载',
      // Pdf文件
      fileListPdf: [],
      // 图片文件文件
      fileList: []
    }
  },
  // 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  computed: {
  },
  // 对象内部的属性监听，也叫深度监听
  watch: {
  },
  // 请求数据
  created() {
  },
  mounted() {
  },
  // 方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
    /**
     * @description:文件上传成功返回
     * @param  {*}
     * @return {*}
     * @param {*} file 本地文件信息
     */
    afterRead(file) {
      console.log('file-----', file)
    },
    /**
     * @description:图片/文件上传线上成功返回
     * @param  {*}
     * @return {*}
     * @param {*} data 文件信息及线上链接
     */
    uploadSuccess(data) {
      console.log('imageData-----', data)
    }
  }
}
</script>

<style scoped lang="scss">
.community-administrative{
   padding:10px 10px 0 10px;
}
</style>

效果展示如下：
在这里插入图片描述

文见传入格式点此处查看

使用以上组件
存在问题：上传会存在上下闪动问题
出现原因：fileList双向绑定会导致value赋值两次
点此处进行办法解决>>

qq_41468247
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3+Ts+element-plus+Upload+阿里云OSS前端直传组件二次封装
qq_38902432的博客
09-27 3925
vue3+Ts+element-plus+Upload+阿里云OSS前端直传组件二次封装
vue前端直接使用element-ui的upload组件上传到阿里云OSS存储
weixin_48373171的博客
03-30 4691
（能看到这说明什么安装element-ui都会了，我就不详细介绍了，直接跳过）在执行下面操作之前，你要确定你的阿里云能看到上边这个页面这里主要是配置读写，只有设置成公共读写，才可以前端直接上传，不需要跟后端要什么token了（3）运行一下试试，咦，是不是报跨域问题了？没有恭喜你成功了，出现的小伙伴也不要着急，请看下图按上图配置，八九不离十，直接成功！
el-upload多选封装上传组件,灵活性强可自定义
最新发布
OuerdeshenH的博客
05-11 573
自定义上传文件，单选多选以及样式自定义，可根据项目自行扩展
Vue3中图片上传组件封装-element-plus的el-upload二次封装-案例
JackieDYH的博客
09-26 3107
在Vue3中，我们可以使用element-plus提供的el-upload组件进行图片上传。但是有时候我们需要根据具体业务需求对该组件进行二次封装，以适应项目中的具体场景。下面给出一个基于element-plus的el-upload组件的二次封装，实现图片上传和图片预览功能。
基于el-upload实现文件上传组件封装以及细节处理
qq_52569656的博客
10-17 2306
本文技术栈基于Vue2+ElementUi+Axios+Less文件上传在日常开发中也是非常常见，本文会基于实际项目的需求从0到1手把手带你基于el-upload封装一个文件上传组件，同时介绍一些需要注意的细节...
vue+axios+el-upload实现文件上传（带参数）：
01-03
备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media Type）；请将此配置注释掉； async uploadFile(...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
基于vue-upload-component封装一个图片上传组件的示例
01-19
先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件，没有完全满足需求的组件，过滤后找到 vue-upload-component 组件，功能基本都有，自定义也比较灵活，就以以此进行二次开发。 预览 因为项目是...
vue结合el-upload实现腾讯云视频上传功能
11-20
在本文中，我们将探讨如何利用Vue.js和Element UI的el-upload组件来实现腾讯云视频上传功能，以解决在上传大体积视频时遇到的性能和用户体验问题。首先，我们需要理解为什么选择腾讯云作为视频上传的解决方案。传统...
vue-upload-cropper:结合 ELUpload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装
05-10
vue-upload-cropper结合 element-ui upload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装DemoNotices使用条件：使用 elementUI编译环境安装并配置 babel-plugin-transform-vue-jsx，babel-plugin-syntax-...
vue3新语法实现oss图片上传
SuxiWanG522的博客
09-15 485
oss
通过el-upload上传图片到阿里云oss
chaochao2_0的博客
01-09 3524
通过el-upload上传图片到阿里云oss开通阿里云oss上传图片到oss首次连接遇到的跨域问题oss绑定域名完整项目代码 对象存储服务（Object Storage Service，OSS）是一种海量、安全、低成本、高可靠的云存储服务，适合存放任意类型的文件。容量和处理能力弹性扩展，多种存储类型供选择，全面优化存储成本。 开通阿里云oss 首先需要在阿里云控制台开通oss服务，这里不做过多叙述，开通后需要创建Bucket，然后即可上传文件至oss。 上传图片到oss 如何在项目中上传图片至oss中： 1
vue Element ui上传组件el-upload封装
果冻
06-27 2128
vue Element ui上传组件el-upload封装
vue 基于 el-upload 封装视频上传组件
且听风吟的博客
12-20 3674
新建video-upload.vue文件： <template> <div class="video-upload-com"> <el-upload :action="uploadUrl" :before-upload="beforeAvatarUpload" :file-list="mediaList" :on-success="handleSuccess" :on-exceed="exceedTips" :limit="1" :on-remove="handle
前端el-upload拖拽上传文件到oss服务器
weixin_67898309的博客
11-17 1820
上传文件到服务器
element-ui的upload上传封装组件
weixin_58459702的博客
07-03 425
【代码】element-ui的upload上传封装组件。
vue3+elementplus el-upload组件上传第三方oss存储问题
qq_33453797的博客
02-07 665
而el-upload组件是elementui提供的一个文件上传的组件，其有很多属性和事件，如下图所示是其组件的部分属性，因为其属性和事件比较多，所以el-upload组件也是一个比较有难度的组件。第一个问题就是，如果后端的上传接口是我们自己开发的，那么直接使用action参数的问题也不是很大，因为基本上能满是上传文件的需求。首先，el-upload组件有一个必填项的参数action，这个参数就是类似于表单提交中的action参数，是要提交的后端地址。可能有人会有疑问，这个optinos参数的作用是什么？
基于element upload封装上传组件
qq_26880461的博客
12-15 434
上传文件 图片
vue+axios+el-upload实现.csv文件上传的例子
07-13
当然可以！以下是一个使用Vue、Axios和Element UI的例子，演示如何实现.csv文件的上传： 首先，确保你已经安装了Vue、Axios和Element UI。你可以通过以下命令进行安装： ```bash npm install vue axios element-ui ``` 接下来，创建一个Vue组件，比如命名为Upload.vue。在该组件中，你可以使用`el-upload`组件来实现文件上传，`axios`来发送请求： ```vue <template> <div> <el-upload class="upload-demo" action="/upload" :on-success="handleSuccess" :before-upload="beforeUpload" :auto-upload="false" accept=".csv" > <el-button slot="trigger" size="small" type="primary">选择文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="upload">上传</el-button> <div slot="tip" class="el-upload__tip">只能上传.csv文件</div> </el-upload> </div> </template> <script> import axios from 'axios'; export default { methods: { handleSuccess(response, file, fileList) { // 文件上传成功的处理逻辑 console.log(response); }, beforeUpload(file) { // 文件上传前的逻辑处理 console.log(file); }, upload() { // 手动触发文件上传 this.$refs.upload.submit(); } } } </script> <style scoped> .upload-demo { display: inline-block; margin-top: 20px; } </style> ``` 在上述代码中，`el-upload`组件用于实现文件上传，`action`属性指定了上传文件的目标地址，`:on-success`属性指定了文件上传成功后的回调函数，`:before-upload`属性指定了文件上传前的逻辑处理函数，`:accept`属性指定了只能上传.csv文件。 在`handleSuccess`函数中，你可以处理上传成功后的逻辑，比如从服务器返回的响应中获取上传后的文件信息。 在`beforeUpload`函数中，你可以对上传的文件进行一些验证，比如文件类型、大小等。 在`upload`函数中，我们通过`this.$refs.upload.submit()`来手动触发文件上传。 最后，在你的Vue应用中使用该组件即可： ```vue <template> <div> <upload></upload> </div> </template> <script> import Upload from './Upload.vue'; export default { components: { Upload } } </script> ``` 在上述代码中，我们将刚才创建的`Upload.vue`组件引入，并在模板中使用`<upload></upload>`来调用该组件。 这样，你就可以在Vue应用中实现.csv文件的上传了！记得根据你的实际需求，修改`action`属性指定的上传地址和相应的处理逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值