图片上传----七牛上传

最新推荐文章于 2024-07-22 15:13:59 发布

白柚Y

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量34

点赞数

文章标签： javascript 开发语言前端 elementui vue.js

本文链接：https://blog.csdn.net/m0_67084957/article/details/132407836

版权

<template>
  <div class="img-upload-wrap">
    <!-- 文件上传 -->
    <el-upload
      class="upload-demo"
      ref="upload"
      action=""
      :http-request="selfUpload"
      :show-file-list="false"
      accept="image/*">
      <el-button size="small" type="primary" v-if="options" @click="$emit('uploadBtnClick')">{{options.title}}</el-button>
    </el-upload>
  </div>
</template>
<script>
import Uploader from '@/server/qiniu/index';
export default {
  name: 'pictureUpload',
  props: {
    config: {
      type: Object
    }
  },
  data(){
    return{
       options: {
         title: '上传图片',
         errorMsg: 'KB',
         size:0,
         url: '',
         name:"",
       },
        fileReader: '',
    }
  },
  watch: {
    config: {
      handler (val) {
        this.options = Object.assign(this.options,val)
      },
      immediate: true
    }
  },
  mounted(){
      this.fileReader = new FileReader()
  },
  methods:{
    selfUpload(data) {
      let self = this;
      console.log(1111,data)
      if(!data) return false
      if (data.file.size / 1024 / 1024 > 5) {
        this.$message.error(`上传文件最大不能超过5M`)
        return false
      }
        if (data.file) {
            this.fileReader.readAsDataURL(data.file)
        }
        this.fileReader.onload = () => {
            let base64Str = this.fileReader.result
            new Uploader({
                file: base64Str,
                fileName: data.file.name,
                quality: this.options.quality || 0.9,
                onError(err) {
                  self.$message.error(err)
                  $print.log(err)
                },
                onProgress(res) {
                  const percent = res.total.percent;
                  self.progress = parseInt(percent, 10);
                },
                onSuccess(res) {
                  self.options.url = res.url
                  self.options.name = data.file.name
                  self.options.size = data.file.size /1000 + "KB"
                  self.$emit('upSuccess', self.options)
                  self.$refs.upload.value = ''
                }
            })
        }

    }
  }
}
</script>
<style lang="less" scoped>
.img-upload-wrap{
  display: block;
  margin-right: 10px;
}
</style>