vue + vue-element 实现base64文件上传(作者已实践)

一、使用element-ui中的upload组件

 <el-row>
    <el-col :span="24" :offset="2">
        // 文件上传组件
        <el-form-item label="用户头像">
            <el-upload
              ref="updload_avatar" // ref 用于refs 定位当前元素
              action="" // 提交的后台地址,因为使用base64 所以不写后台地址,但是该参数为必须的,不能删除
              list-type="picture-card" // 设置文件选择样式
              class="avatar-uploader" // class 名称 可以不要
              :auto-upload="false" // 是否自动上传
              :limit="1" // 限制只能选择一张图片
              :on-change="getFile" // 当图片改变时触发
             >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
             </el-upload>
             
			 // 图片展示
             <img v-if="userInfo.accountImg" ref="img" class="avatar-img" :src="userInfo.accountImg">
         </el-form-item>
    </el-col>
 </el-row>

二、定义data

data() {
	return {
		userInfo: {}
	}
}

三、编写方法

// 用于获取base64字符
getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function() {
          imgResult = reader.result
        }
        reader.onerror = function(error) {
          reject(error)
        }
        reader.onloadend = function() {
          resolve(imgResult)
        }
      })
    },
    // 文件校验
    verifyFile(file) {
      return new Promise((resolve, reject) => {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          reject('上传头像图片只能是 [jpg, png, gif] 格式!')
        }
        if (!isLt2M) {
          reject('上传头像图片大小不能超过 2MB!')
        }
        resolve(isJPG && isLt2M)
      })
    },
    // upload组件触发改变的事件
    getFile(file, fileList) {
      // 清除上一次选择的文件 避免后面不在触发此事件
      this.$refs['updload_avatar'].clearFiles()

      // 文件格式及大小校验、获取base64
      this.verifyFile(file.raw).then(resp => {
        return this.getBase64(file.raw)
      }).then(resp => {
        // 这里强调一下为什么是使用这种方式而不是使用
        // this.userInfo.accountImg = resp
        // 因为vue 数据监测不到对象深处的数据更改,所以需要使用$set通知一下vue
        // 不这样写会导致页面中的图片展示不生效
        this.$set(this.userInfo, 'accountImg', resp)
      }).catch(err => {
        this.$message(err)
      })
    }

四、效果展示

base上传演示

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,针对您的问题,以下是实现 Vue+Element-UI上传图片并压缩的基本步骤: 1. 安装依赖 在项目中安装 Element-UI 和插件 vue-image-crop-upload 以及图片压缩库,可使用以下命令: ``` npm install element-ui vue-image-crop-upload compressjs --save ``` 2. 引入 Element-UI 在 main.js 中引入 Element-UI: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 使用 vue-image-crop-upload 在需要上传图片的组件中使用 vue-image-crop-upload,可使用以下代码: ```vue <template> <div> <vue-image-crop-upload ref="upload" :url="uploadUrl" :headers="uploadHeaders" :size="size" :accept="accept" :beforeUpload="beforeUpload" :cropConfig="cropConfig" :compressConfig="compressConfig" @input="handleInput" @crop-success="handleCropSuccess" > <el-button size="small" type="primary">上传图片</el-button> </vue-image-crop-upload> </div> </template> <script> import VueImageCropUpload from 'vue-image-crop-upload' export default { components: { VueImageCropUpload }, data() { return { uploadUrl: 'xxx', // 上传地址 uploadHeaders: { // 上传请求头 Authorization: 'Bearer ' + getToken() }, size: 1024 * 1024 * 2, // 上传图片大小限制 accept: '.jpg,.jpeg,.png', // 上传图片格式限制 cropConfig: { // 图片裁剪配置 aspectRatio: 1 / 1, autoCropArea: 1, viewMode: 1, zoomable: false, guides: false, dragMode: 'move', cropBoxResizable: false, crop: () => {} }, compressConfig: { // 图片压缩配置 targetSize: 1024 * 1024, // 目标大小 quality: 0.7, // 压缩质量 mimeType: 'image/jpeg' // 输出格式 } } }, methods: { beforeUpload(file) { // 文件上传前的回调函数 this.$refs.upload.startUpload() }, handleInput(file) { // 文件选择后的回调函数 this.$refs.upload.showCrop() }, handleCropSuccess(blob, file) { // 图片裁剪成功后的回调函数 this.compressImage(blob, file) // 压缩图片 }, compressImage(blob, file) { // 图片压缩 const reader = new FileReader() reader.readAsDataURL(blob) reader.onload = (e) => { const base64 = e.target.result const compressedBlob = Compress.compress(base64, this.compressConfig) const compressedFile = new File([compressedBlob], file.name, { type: compressedBlob.type }) this.$emit('upload', compressedFile) // 触发上传事件 } } } } </script> ``` 4. 完成上传 在父组件中监听上传事件,使用 axios 或其他方法上传文件至服务器: ```vue <template> <div> <upload :action="uploadUrl" @upload="handleUpload"></upload> </div> </template> <script> import axios from 'axios' import Upload from './Upload.vue' export default { components: { Upload }, data() { return { uploadUrl: 'xxx' // 上传地址 } }, methods: { handleUpload(file) { const formData = new FormData() formData.append('file', file) axios.post(this.uploadUrl, formData).then(response => { console.log(response.data) }) } } } </script> ``` 以上就是实现 Vue+Element-UI上传图片并压缩的基本步骤,您可以根据您的具体需求进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值