前端与后端图片传递

最新推荐文章于 2024-05-08 23:39:58 发布

_大龄

最新推荐文章于 2024-05-08 23:39:58 发布

阅读量2.5k

点赞数

分类专栏：前端文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_59017683/article/details/128574354

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

后端传给前端base64格式，前端展示：前面加上'data:image/png;base64,'

<image
      v-if="imageItem.img"
      style="width: 555px;height: 420px;margin-top:5px"
      :src="'data:image/png;base64,'+imageItem?.img"
      fit="fill">
</image>

前端传给后端用表格形式

<div>
  <input
      type="file"
      :id="'file-upload-week'+imageItem.type"
      class="file-upload-img"
      accept="image/*"
      name="picture"
      style="display: none"
      @change="preview($event,imageItem.type)"
  >
  <div class="img-btn" v-if="imageItem.img">
    <em class="change-icon" title="修改" @click="getFile(imageItem.type)"><i></i></em>
    <em class="delete-icon" title="删除" @click="removeImage(imageItem.type)"><i></i></em>
  </div>
  <image
      v-if="imageItem.img"
      style="width: 555px;height: 420px;margin-top:5px"
      :src="'data:image/png;base64,'+imageItem?.img"
      fit="fill">

  </image>
  <!--                            无图片时展示添加方框-->
  <div class="no-image" v-if="!imageItem.img" @click="getFile(imageItem.type)">
    <h1>暂无图片</h1>
    <h1>请点击添加</h1>
  </div>
</div>

getFile:function (type){
      let id =''
      if(vm.reportType === 'weekend'){
        id = 'file-upload-week'+type
      }else if(vm.reportType === 'month'){
        id = 'file-upload-month'+type
      }
      document.getElementById(id).click()
    },
//添加修改图片
    preview:function (e,type){//imgUpload
      let files = e.target.files;
      let imgData=[]
      for (var i = 0; i < files.length; i++) {
        imgData.push(files[i]);
      }
      this.uploadImage(imgData,type)
    },
//上传图
    uploadImage:function (img,type){
      showLoading();
      var formData = new FormData();
      formData.append("file", img[0]);
      formData.append('datefrom', this.imageDate[0]);
      formData.append('dateto', this.imageDate[1]);
      formData.append('type', type);
      $.ajax({
        url: RES_IP + 'xxxx',
        dataType: 'json',
        type: 'post',
        data: formData,
        cache: false,
        processData: false,
        contentType: false,
        success: function (res) {
          if (res.status) {
            if(vm.reportType === 'weekend'){
              vm.getWeekReport()
            }else if(vm.reportType === 'month'){
              vm.getMonthReport()
            }
          } else {
          }
        }
      })
    },