Jeecg-Boot (vue)头像(图片单个)上传

Vue.js头像上传组件实战

最新推荐文章于 2023-08-18 10:54:03 发布

原创最新推荐文章于 2023-08-18 10:54:03 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

Jeecg-Boot 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用Vue.js构建一个具有图片预览、上传进度显示和错误处理的头像上传组件。通过实现beforeUpload和handleChange方法，确保了上传文件的类型和大小验证，同时展示了如何利用Vue的计算属性和数据绑定来更新UI。

效果展示：

在这里插入图片描述
↓

(1) vue组件：

<a-upload
  listType="picture-card"
  class="avatar-uploader"
  :showUploadList="false"
  :action="uploadAction"
  :data="{'isup':1}"
  :headers="headers"
  :beforeUpload="beforeUpload"
  @change="handleChange"
>
  <img v-if="picUrl" :src="getAvatarView()" alt="头像" style="height:140px;max-width:180px;border-radius:50%"/>
  <div v-else style="height:140px;width:140px;padding-top:35%">
    <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
    <div class="ant-upload-text" style="color: dimgray">上传头像</div>
  </div>
</a-upload>

(2) 编写beforeUpload，handleChange,getAvatarView方法
写在method{ }中

beforeUpload: function(file){
  var fileType = file.type;
  if(fileType.indexOf('image')<0){
    this.$message.warning('请上传图片');
    return false;
  }
  //TODO 验证文件大小
},
handleChange (info) {
  this.picUrl = "";
  if (info.file.status === 'uploading') {
    this.uploadLoading = true;
    return
  }
  if (info.file.status === 'done') {
    var response = info.file.response;
    this.uploadLoading = false;
    console.log(response);
    if(response.success){
      this.model.img= response.message;
      this.picUrl = "Has no pic url yet";
    }else{
      this.$message.warning(response.message);
    }
  }
},
getAvatarView(){
  return this.url.imgerver +"/"+ this.model.img;
},

(3) 添加引用

 import Vue from 'vue'
 import { ACCESS_TOKEN } from "@/store/mutation-types"

(4) 获取tocken

created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token} 
},

(5) 增加数据属性

data () {
  return {
      ...
      headers:{},
      picUrl: "",
      uploadLoading:false
  }
}

(6) 增加上传路径

url: {
    ...
    fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
    imgerver: window._CONFIG['domianURL']+"/sys/common/view",
},

(7) 上传路径初始化：
（目前暂时将uploadAction方法放入method中）

computed:{
      uploadAction:function () {
        return this.url.fileUpload;
      }
},

(8) 实现编辑时的显示

edit (record) {
    this.form.resetFields();
    this.model = Object.assign({}, record);
    this.visible = true;
    this.$nextTick(() => {
      this.form.setFieldsValue(pick(this.model,'fname','fnumber','createBy','createTime','updateBy','updateTime','img'))
//时间格式化
    });
    this.picUrl = this.model.img;//以这句为主,设置model中的图片字段
},