精华内容
下载资源
问答
  • 处理后台返回流文件,多张图片处理,返回成一个压缩包 处理方法: 就可以下载成一个压缩包了哦 单张图片下载(相当于浏览器下载)
    1. 处理后台返回流文件,多张图片处理,返回成一个压缩包
      在这里插入图片描述
      处理方法:
      在这里插入图片描述
      在这里插入图片描述
    let blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
    let fileName = decodeURI(res.headers['content-disposition'].split('filename*=utf-8')[1])
    if (window.navigator.msSaveBlob) {
    	// ie
        window.navigator.msSaveOrOpenBlob(blob, fileName)
         return
    }
    let elink = document.createElement('a')
    elink.style.display = 'none'
    elink.href = window.URL.createObjectURL(blob)
    elink.download = fileName
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href)
    document.body.removeChild(elink)
    

    就可以下载成一个压缩包了哦

    1. 单张图片下载(相当于浏览器下载)
      在这里插入图片描述
    this.$http.post( --接口名---, data, { responseType: 'arraybuffer' })
       .then(response => {
          return 'data:image/png;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        })
        .then(data => {
          var link = document.createElement('a')
          link.href = data
          if (imgsrc.indexOf('.jpg') != -1) { // 判断图片格式,非jpg格式,都已png格式显示
            link.download = name + '.jpg'
          } else {
            link.download = name
          }
          link.click()
        })
    

    展开全文
  •  在做员工系统时,前端传递图片文件给后端后端返回的图片路径为姓名+员工部门,此时重新以当前员工身份传递图片时,后端返回的路径仍然为当前员工姓名与员工部门,此时我们传递的新图片已经保存到了后端数据库中...

    问题背景

     在做员工系统时,前端传递图片文件给后端,后端返回的图片路径为姓名+员工部门,此时重新以当前员工身份传递图片时,后端返回的路径仍然为当前员工姓名与员工部门,此时我们传递的新图片已经保存到了后端数据库中。因为后端返回的图片路径不变,导致前端图片不会重新请求数据。

    解决办法

     我们需要使图片路径不完全相同,才会使得img标签会重新请求新的图片,这时我加入了随机数进行更改图片的完整路径,但不影响图片向真正的地址去请求数据。
    代码:

     		/* 上传头像成功时的回调 */
            handleAvatarSuccess(res, file) {
                console.log(res,file)
                if(res.code == 200){
                    this.$message.success("上传成功")
                }
    	 		//在请求到的图片路径后方加入随机数,使得每次渲染的完整图片路径都不相同,使得图片重新加载
                this.imageAvatarUrl = res.data + '?'+ Math.random();
                
            },
    

     问题解决~

    展开全文
  • vue显示图片 后端返回字符串

    千次阅读 2019-04-26 15:00:45
    vue显示多张图片-接收后端数据 后端返回字段如下 可以看见,每张图片的相对路径我用逗号拼接。 前端接收主要代码 <ul style="padding: 3px"> <li class="imgsh" id="imgUrls"><img v-for="item ...

    vue显示多张图片-接收后端数据

    1. 后端返回字段如下
      后端返回的字段
      可以看见,每张图片的相对路径我用逗号拼接。
    2. 前端接收主要代码
    <ul style="padding: 3px">
              <li class="imgsh" id="imgUrls"><img v-for="item in imgurls" :src="require(`../../../image/video_pic/${item}`) "></li>
               <!--<li><img src="../../../image/video_pic/13163000.jpg"></li>-->
               <!--<li v-for ="item in imgurls" :key="item.url">-->
                   <!--<img :src="item.url" alt="imgurls">-->
                   <!--&lt;!&ndash;<p>{{item.CnName}}</p>&ndash;&gt;-->
               <!--</li>-->
    </ul>
    
    <img v-for="item in imgurls" :src="require(`../../../image/video_pic/${item}`) ">
    

    src中主要是在vue的目录下建立了文件夹image,再在image下面建立video_pic。要存在vue的根目录才行。网上很多代码直接用变量访问**"…/…/image"** 这种类型的路径,也不知道他们是怎么成功的,反正我没有成功。
    直接在src中这样访问当然没有问题,但是一旦加入变量根本不行,我找了好多资料,自己搞了半天才发现必须加require字段才行。不吐槽了

    1. 前端接收后端代码
    getPicPath(this.sizeForm.hospitalcard)
       .then(response => {
    
    
          this.imgurls = response.data.split(',');
           console.log( this.imgurls);
           // const target = {};
           // let indexs = 0;
           // imgtemp.forEach(a=>{
           //     // console.log(a);
           //     const source = JSON.parse(`{"${indexs}":"${a}"}`);//造出对象
           //     indexs++;
           //     Object.assign(target,source);
           // });
           // console.log(target);
    
       })
    

    我的代码进行整合了的,大家测试可以利用axios,直接访问后端端口的接口,比如:
    在这里插入图片描述
    这样就能成功了,保证能行。贴上我的效果图
    这是我的效果图
    4. 还有一种就是针对图片少的时候返回base64码的情况,后端当然是直接返回图片的base64码了。
    前端是这样的

     <ul>
            <li class ="img_iden" id="imgUrl"></li>
      </ul>
    

    在方法里面,接收返回的数据进行显示,代码为

    // let imgurls =[];
                // imgurls = res.data.imgUrl.split(",");
                // for(let i=0;i<imgurls.length;i++){
                //     let img=new Image();
                //     img.src ="data:image/jpg;base64,"+imgurls[i];
                //     console.log(img.src);
                //     img.style.width = 148+"px";
                //     img.style.height = 148+"px";
                //     let imgContainer=document.getElementById("imgUrl");
                //     imgContainer.appendChild(img);
                // }
    

    这段代码是可行的,只不过我不用这种方法了,就把它注释掉了。因为base64码太长了,我不好调试,占一大块屏幕。

    展开全文
  • vue 前端传图片文件,后端接收

    千次阅读 2019-05-06 16:31:02
    vue端 1、在 main.js 文件中添加 const upload = axios.create({ //这里配置你自己的url baseURL: 'http://localhost:8096/reconciliation/', timeout: 50000, }); Vue.prototype.$upload = upload; 2、在...

    vue端

    1、在 main.js 文件中添加

    const upload = axios.create({
      //这里配置你自己的url
      baseURL: 'http://localhost:8096/reconciliation/',
      timeout: 50000,
    });
    Vue.prototype.$upload = upload;

    2、在需要上传文件的vue文件中

    uploadImg(file){
        var _this = this;
        var formData = new FormData();
        formData.append("file", file.raw);
        _this.$upload.post("file/upload", formData)
        	.then(res => {
    		    _this.$message(res.data.userInfo, 'success');
    	    }).catch(data=>{
    		    console.log(data);
    	    })
    }

    3、在后台controller中

    @RestController
    @RequestMapping("file")
    public class FileDataController {
        @RequestMapping(value = "/upload", method = RequestMethod.POST)
        public String handleFileUpload(@RequestParam("file") MultipartFile file) throws IOException {
            // 将图片转为base64
            BASE64Encoder encoder = new BASE64Encoder();
            String imgData = encoder.encode(file.getBytes());
            String url = null;
            //这里要进行的图片操作
            return url1;
        }
    }

     

     

    展开全文
  • 1.基于element-ui的多文件上传并存于后端文件夹 这里我们需要用到element-ui中的upload上传upload组件 a:element-ui的安装与使用 (1) 在cmd的vue项目路径或Visual Studio Code的终端下执行 npm i element-ui -S...
  • vue项目前端处理后端返回的图片

    千次阅读 2020-05-13 16:24:35
    做登录或者注册的时候,会用到验证码,前端会接收后端发的验证码图片 就像这样的 <el-form-item label="验证码" prop="name"> <el-input style="width: 147px;" v-model="ruleForm.verification" ...
  • 最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414请求一直报错,显示 request URI too ...
  • 记一次图片前端传后端遇到的各种大坑。 先阐述几个难点 授人以鱼不如授人以渔 有则共勉,重点已加粗 文章最后再附上源码。 第一点就是打开电脑窗口 怎么实现按住ctrl可以多选文件: (注) accept : 接收类型; ...
  • vue JS export const fileUpload = (File) => { let formData = new FormData(); formData.append('image',File) return axios.request({ url: `admin/upload/logo`, data: formData, method: 'post', ...
  • VUE发送Formdata数据•参数blob是通过this.cropper.getCroppedCanvas().toBlob(blob => { });获取到的。•具体使用方法,参考此链接地址[1]// 这里我使用的是cropperjs插件,裁剪图片成功执行此方法 crop(blob) {...
  • 现在我在vue前端用formdata上传图片,通过**http-request设置的接口uploadUserImage发送**,但是由于预设好的拦截器,只能发送**json数据**到go后端,请问是否有避开的方法 前端 ``` httpRequest(params){ ...
  • vue axios请求图片流文件前端页面显示处理方法 background url base64 js动态创建样式: style 和 link 正文 这次我接收到的直接是一个图片文件,然后乱码了。。 如下图 要怎么处理呢? 首先是第一步,请求处理,...
  • 最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414请求一直报错,显示request URI too large...
  • 最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414请求一直报错,显示 request URI too ...
  • 使用环境:前端 vue + axios,后端 springBoot 前端 save() { const data = [] // 图片对象数组 data.push({ gpGid: this.gId, gpAddress: this.imgList[0], gpIsCover: 1, }) this.$axios({ ...
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼@RequestMapping("download")public void download(ModelMap modelMap,HttpServletRequest req,HttpServletResponse resp) throws IOException, ServletException{System...
  • 参考:vue axios请求图片流文件前端页面显示处理方法background url base64js动态创建样式: style 和 link正文这次我接收到的直接是一个图片文件,然后乱码了。。 如下图要怎么处理呢?首先是第一步,请求处理,下面...
  • 最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414请求一直报错,显示request URI too large...
  • 用户到店U盘(微信、QQ)发送文件→店主接收→打印 imYun打印流程: 用户通过小程序上传文件→店主在线预览(下载)&打印 系统截图: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-...
  • 背景:前后端分离项目,使用的框架:tp5+vue 概述:近日在开发网页的时候,有上传图片(文件)的问题,于是记录一下...2、thinkphp后端接收图片: 控制器接口 use app\user\model\UploadModel as UploadModel; pu...
  • Vue+SpringBoot上传图片[Vue warn]: Invalid prop: type check failed for prop “image”. Expected String, got Undefined. 在学习尚硅谷项目因为自己的习惯遇到的问题。 检查前端代码image-cropper,field与后端...
  • 预先采用vue.js + plupload + element-ui实现了文件在浏览器端的发送,而采用了spring boot + spring + spring mvc + mybatis实现了文件在服务器端的接收和存储。 本项目为预期实现 效果图 演示地址: : ps:用git...
  • 后端使用这样的方式接收图片和一个对象: @ApiOperation(value = "增加分类") @PostMapping(value = "/categories") public Object add(@RequestBody Category category, MultipartFile image, ...
  • 后端项目中已有一个接口,接收前端input[type=file]上传的图片文件。但前端需要添加一个重置功能,即将图片重置为默认图片,且不添加新接口。因此,想要利用此接口实现重置功能,即是将项目内的默认图片转换为file...
  • vue+springboot,前端使用富文本添加图片过大时请求后台失败 报错: 控制台报错 或者 后台接收到的参数 为空。 原因: springboot的tomcat限制了post请求的 大小,我的是被限制在2M。添加在富文本的图片使整个...

空空如也

空空如也

1 2 3
收藏数 60
精华内容 24
关键字:

vue接收后端图片

vue 订阅