图片上传与下载展示的总结

最新推荐文章于 2022-08-02 15:47:37 发布

sikies

最新推荐文章于 2022-08-02 15:47:37 发布

阅读量351

点赞数 1

分类专栏：前段学习 js学习文章标签：图片上传与下载显示需求

本文链接：https://blog.csdn.net/qq_38277179/article/details/101618354

版权

js学习同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

前段学习

17 篇文章 0 订阅

订阅专栏

1 上传图片

上传图片有两种方式：

借助 form 和 post

首先新建一个formData 的对象，然后将读取到的文件作附到表单上，接下来提交表单。

            var formdata = new FormData();
            formdata.append('file', img, img.name);
            xhr.open('POST', url);
            xhr.setRequestHeader('Auth-Token', constant.accessToken);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                       console.log("成功");
                    } else {
                        console.log('失败！');
                    }
                }
            };
           xhr.send(formdata);

解释：formData的使用，可以通过append(key,value)在数据末尾追加数据，

value字段类型可以是 Blob, File, 或者 string: 如果它的字段类型不是Blob也不是File，则会被转换成字符串类)。

第三个可选参数设置发送请求的头 Content-Disposition 指定文件名。如果不指定文件名（或者不支持该参数时），将使用名字“blob”。

使用 input type为file 的上传文件按钮时，自带files对象，一般获取到的为files[0]，它可以直接将其作为 value 添加到 formData 上，具体见：https://www.cnblogs.com/shapeY/p/7903414.html，使用formData上传图片（包括多个图片上传）。

如果多个图片上传：

var formData = new FormData();
for(var i=0; i<$('#file')[0].files.length;i++){
    formData.append('file'+i, $('#file')[0].files[i]);
}

注意：fileReader 使用，fileReader 读取文件并封装为一个 files 对象数组，如果需要将 file 对象转为其他的格式，就要用到 fileReader 了。

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

转自：https://blog.csdn.net/lqw_java_home/article/details/78412224

借助 sendAsBinary.
FileReader 的 readAsBinaryString 方法读取到文件的二进制码，然后通过 XMLHttpRequest 的 sendAsBinary 方法将其发送出去

这种方法没有使用过，详细见https://blog.csdn.net/oscar999/article/details/37499743

为了便于理解，我认为绘制一个关系图比较好：

下面将列出在本地预览图片的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        window.onload = function () {
            var myFileElement = document.getElementById("file1");
            var myImg = document.getElementById("img1");
            var reader = new FileReader();
            myFileElement.onchange = function (event) {
                var files = event.target.files;
                console.log(files);
                console.log(myFileElement.files); 
                reader.readAsDataURL(files[0]);
                reader.onload = function () {
                    myImg.src = reader.result; 
                }
            }
        }
    </script>
</head>
<body>
    <input type="file" name="myFile" id="file1">  
    <img style="display: block" src="#" alt="要上传的图片" id="img1">  
</body>
</html>

补充——上传图片进度显示

关键：xhr.onload.addEventListener('progress', uploadProgress, false); uploadProgress 的 evt 事件对象有 loaded 和 total 两个属性，可供实现上传文件百分比显示。

      function fileSelected() {
        var file = document.getElementById('fileToUpload').files[0];
        if (file) {
          var fileSize = 0;
          if (file.size > 1024 * 1024)
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
          else
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
        }
      }
      function uploadFile() {
        var fd = new FormData();
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        // 添加事件监听
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "/");//修改成自己的接口
        xhr.send(fd);
      }
      function uploadProgress(evt) {
        if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
        }
        else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
      }
      function uploadComplete(evt) {
        /* 服务器端返回响应时候触发event事件*/
        console.log(evt.target.responseText);
      }
      function uploadFailed(evt) {
        console.log("There was an error attempting to upload the file.");
      }
      function uploadCanceled(evt) {
        console.log("The upload has been canceled by the user or the browser dropped the connection.");
      }

2下载图片

按照需求，可以分以下两种情景，前端显示图片，前端下载图片（当然也可以展示图片）。

二进制流转图片：如果接口返回的是个图片，前端需求是展示这个图片，可以直接将api放到img标签的src中，和普通ajax请求的接口一样，这样在浏览器network中可以看到这个图片和请求一样，不过类型成了img类型的。

二进制流下载：借助blob对象

————————————————
版权声明：本文为CSDN博主「aydongzhiping」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/aydongzhiping/article/details/82462473

也就是说如果只是需要前端展示图片，完全可以使用第一种情况去做，直接将服务器资源的 url 放在 img 的 src 属性上。

<img src="url****" />

这样做不仅省去了下面要介绍借助 blob 对象的麻烦，而且实际上 src 也是可以发送请求的（详见jsonp跨域解决方案），而且与 ajax 引擎是相互独立的。

如果需要下载图片并展示，就需要借助 blob 对象了。

function downLoadImg (callback) {
    const url = *****;
    const xmlHttp = new XMLHttpRequest();
    xmlHttp.responseType = 'blob';
    xmlHttp.onreadystatechange = () => {
        if (xmlHttp.readyState === 4) {
            if (xmlHttp.status === 200) {
                let type = xmlHttp.getResponseHeader('Content-Type');
                let blob = new Blob([xmlHttp.response], {type: type});
                let objectUrl = window.URL.createObjectURL(blob)
                callback(objectUrl);
            } 
        }
    };
    xmlHttp.open('GET', url, true);
    xmlHttp.send(null);   
}

解释1：关于 responseType 的使用，

http规范中规定了一个Content-type头，用来指明数据主体的格式，来告诉收发的两端将二进制的数据主体按照什么类型进行解析。而这两个接口（response和responseText），其实只是提供了一些便捷的接口，配合responseType，方便用户获取到解析好的响应，省去手动解析响应主体的步骤。

转自-----https://segmentfault.com/q/1010000018898974

也就是说在发送http请求的时候，我们可以控制返回数据的格式（responseType），如上，我们想返回的数据直接按照 blob 对象的格式进行解析，那么就可以在 xmlHttp 上指定 xmlHttp.responseType = 'blob'。

解释2：关于 createObjectURL 的使用

The URL.createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter. The URL lifetime is tied to the document in the window on which it was created. The new object URL represents the specified File object or Blob object.

window.URL.createObjectURL()静态方法创建一个包含 URL 的 DOMString，URL 对象代表了传入 creatObjectURL 的参数。URL的生命周期绑定在这个创建它的 window 下的document 。这个新的 URL 对象代表着特定的 File或者 Blob 对象。

具体见：https://www.cnblogs.com/liulangmao/p/4262565.html，

解释3：Blob 对象，使用 Blob 构造函数创建一个blob 对象，接受两个参数，第一个参数是数据内容，第二个参数是数据的格式。

第一个为一个数据序列，可以是任意格式的值，例如，任意数量的字符串，Blobs 以及 ArrayBuffers。第二个参数，是一个包含了两个属性的对象，其两个属性分别是：

type -- MIME 的类型。

转自

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oscar999/article/details/36373183

//Blob() 构造函数允许通过其它对象创建 Blob 对象。比如，用字符串构建一个 blob：

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

sikies

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片上传与下载展示的总结

1 上传图片上传图片有两种方式：借助 form 和 post首先新建一个formData 的对象，然后将读取到的文件作附到表单上，接下来提交表单。 var formdata = new FormData(); formdata.append('file', img, img.name); xhr.open('P...
复制链接

扫一扫

专栏目录