精华内容
下载资源
问答
  • 阿里云OSS上传文件设置请求头

    千次阅读 2021-02-05 20:11:48
    之前写过一篇发送文件消息的,原生input上传文件(聊天发送文件消息),那么这次的需求就是更改上传地址,使用阿里云OSS上传。 那么,这次选择使用elementUI的upload插件,样式各位大哥根据自己的需求实现吧。 要...

    之前写过一篇发送文件消息的,原生input上传文件(聊天发送文件消息),这次的需求就是更改上传地址,使用阿里云OSS上传。

    如果想了解阿里云对象存储OSS是如何使用的,请看阿里云存储对象OSS使用讲解一:OSS的购买和配置

    那么,这次选择使用elementUI的upload插件,样式各位大哥根据自己的需求实现吧,就不做展示了。

    要使用OSS,首先需要安装,引入,创建,这里就不详解了,推荐查看:阿里oss前端上传使用

    这位大哥是基于promise来创建OSS,也可以选择不使用Promise:

    data(){
        return {
          ossConfig: { // ossConfig 的内容根据自己项目自己添加。
            region: '',
            // 阿里云主账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维,请登录RAM控制台创建RAM账号。
            accessKeyId: '',
            accessKeySecret: '',
            bucket: '',
            ossDomain: ""
          },
          client: {},
          tempCheckpoint: "",
          fileList: [],
          processPercent: {},
          extImag:{
            ".zip":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602681161979&di=78bc24f85f33acd6c61c04047624a331&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F22%2F11%2F7256ce730033d96.jpg",
            ".rar":"",
          }
        }
      },
      created() {
        let client = new OSS(this.ossConfig);
        this.client = client
      },

    文件上传:

    methods:{
        async  multipartUpload (fileObj,ossSavePath,fileName,ext){
          let uid = fileName
          this.$set(this.processPercent,uid,0)
          try {
            let self = this;
            let result = await this.client.multipartUpload(ossSavePath, fileObj
            // 以下参数皆为可选参数,可不传
            ,{
              progress: function (p, checkpoint) { // 如果需要显示上传进度则需要使用progress函数
                self.$set(self.processPercent,uid,Math.floor(p*100)) // 在页面中获取processPercent.uid即为上传进度
                // 断点记录点。浏览器重启后无法直接继续上传,您需要手动触发上传操作。
                self.tempCheckpoint = checkpoint;// 记录上传断点
              },
              meta: { year: 2020, people: 'test' },
              mime: fileObj.type,
              headers: {
                "Content-Disposition": `attachment; filename=${encodeURIComponent(fileObj.name)}`,
                "Cache-Control": "public, no-cache"
              }
            })
            let data = {
              url:this.ossConfig.ossDomain+result.name,
              fileName:fileName,
              ext:ext
            }
            return data;
          } catch(e){
            console.log(e);
          }
        },
        uuid(){ // 类似于获取随机字符段
          var s = [];
          var hexDigits = "0123456789abcdef";
          for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
          }
          s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
          s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
          s[8] = s[13] = s[18] = s[23] = "-";
          var uuid = s.join("");
          return uuid;
        },
        uploadFile(data){
          let uid = this.uuid()
          let fileObj = data.file;
          let fileName = fileObj.name
          let pos = fileName.lastIndexOf('.')
          let lastName = fileName.substring(pos, fileName.length)
          let ossSavePath = this.OssSaveDir+uid+lastName;
          let accept = this.accept.split(",");
          let isAllow = accept.indexOf(lastName)
          if(isAllow==-1){
            this.$message.error(`${this.acceptTips}`);
            return false
          }
          const isOverLimit500M = (fileObj.size /1024/1024/100) <= 5
          if (!isOverLimit500M) {
            this.$message.error('上传文件不得大于500MB!')
            return false
          }
          let result = this.multipartUpload(fileObj,ossSavePath,fileObj.uid,lastName)
          result.then((data)=>{
            debugger
            console.log(data)
            let item = {
              "name":fileObj.name,
              "url":data.url,
              "fileName":data.fileName,
              "ext":data.ext,
              "uid":fileObj.uid
            }
            this.fileList.push(item)
            this.$emit('fileList', this.fileList);
          })
        },
      }

    本篇重点:请求头

    如果不传 headers 参数,可能会出现两种情况:

    • 返回的文件链接为查看,而非下载链接【文件类型(txt/doc等)可能会出现,而非图片】
    • 点击下载文件,保存弹框中显示文件名称不正确

    针对这两个问题,重点就是在于设置请求头信息:Content-Disposition。

    Content-disposition 是 MIME 协议的扩展,MIME 协议指示 MIME 用户代理如何显示附加的文件,Content-Disposition 属性是作为对下载文件的一个标识字段

    通俗来讲就是Content-disposition属性决定你在浏览器窗口打开上传成功后返回的文件链接时,浏览器如何响应,是直接在页面显示文件内容,还是下载文件。

    Content-Disposition属性有两个值

    • inline:在浏览器显示打开文件(显示内容)
    • attachment:弹出文件下载保存框(下载文件)

    而如果直接设置属性值为attachment,下载文件可能显示的文件名不正确,这个时候就需要Content-disposition属性控制用户请求所得的内容存为一个文件的时候提供一个默认的文件名,那么就需要传递文件名,综上所述,重点如下:

    // 设置请求头
    headers: {
                "Content-Disposition": `attachment; filename=${encodeURIComponent(fileObj.name)}`
              }

    如果感觉我讲的不清楚的,推荐两篇文章:

    Content-Disposition 响应头。 

    header中Content-Disposition的作用与使用方法

    而为何使用 encodeURIComponent() 方法,就不做详述了,原因如下:

    Request请求:Failed to execute 'setRequestHeader' on 'XMLHttpRequest': String contains non ISO-8859-1 code point.问题解决

    那么,最重要的还是文档,上文档:阿里云 ali-oss 文档

    本篇完~-~

    另附一篇:这个文件下载问题难住了我至少三位同事

    展开全文
  • for(var key in fileList){ //选择多文件使用循环遍历添加 formdata.append('special_img[]',fileList[key].file) } updata(formdata).then(res=>{ console.log(res) }) .catch(function (error) { Toast(...
    var formdata = new FormData();
    for(var key in fileList){		//选择多文件使用循环遍历添加
       formdata.append('special_img[]',fileList[key].file)
    }
    updata(formdata).then(res=>{
       console.log(res)
    })
    .catch(function (error) {
       Toast("服务器错误");
    });
    
    • 接口文件
    import request from '@/utils/request'
    
    export function updata(data){
        return request({
            method:'post',
            url:'/updata',
            headers:{			//设置上传请求头
                'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                'X-Requested-With':'XMLHttpRequest'
            },
            data:data
        })
    }
    
    展开全文
  • jmeter 上传文件请求

    千次阅读 2019-08-21 12:09:36
    jmeter 上传文件请求 根据请求地址,提交文件参数,文件,以及对应的MIME类型即可

    jmeter 上传文件请求

    • 根据请求地址,提交文件参数,文件,以及对应的MIME类型即可
      在这里插入图片描述

    在这里插入图片描述

    展开全文
  • <template> 上传服务器地址" :headers="myHeaders">el-upload> template> <script> var token = localStorage.getItem('token') // 获取token export default { data () { return { myHeaders: {Authorization: ...
    <template>
        <el-upload action="上传服务器地址" :headers="myHeaders"></el-upload>
    </template>
    
    <script>
    var token =  localStorage.getItem('token') // 获取token
    
    export default {
        data () {
            return {
                myHeaders: {Authorization: token}
            }
        }
    }
    </script>
    
    展开全文
  • curl的post请求文件上传(带请求头

    千次阅读 2018-10-22 16:33:23
    php中curl中文件上传 废话不多说,看代码备注(记得区分是面向对象编程还是过程化编程哦) &amp;lt;?php // 返回数据的格式 header('content-type:application/json;charset=utf-8;'); $ch = curl_...
  • java后台发起上传文件的post请求(http和https)

    万次阅读 多人点赞 2019-07-31 19:11:04
    对于文件上传,客户端通常就是页面,在页面里实现上传文件不是什么难事,写个form,加上enctype="multipart/form-data",在写个接收的就可以了,没什么难的。如: <!DOCTYPEhtml> <html> <head> ...
  • 1.restTemplate发送post请求时修改请求头 @PostMapping("/buyWater") public ObjectResult&lt;String&gt; buyWater(@RequestBody Food food) throws Exception { String url = "...
  • curl 模拟 GET\POST 请求,以及 curl post 上传文件

    万次阅读 多人点赞 2018-06-15 11:41:45
    curl 模拟 GET\POST 请求,以及 curl post 上传文件 一般情况下,我们调试数据接口,都会使用一个 postman 的工具,但是这个工具还是有点大了。事实上,我们在调试一些小功能的时候,完全没有必要使用它。在命令行...
  • Postman 上传文件请求

    千次阅读 2019-02-14 11:41:22
    第一步: 第二步:header的key和value Content-Type multipart/form-data   第三步:body 这里选完file 由于重名 误以为key已经填了的情况 正确如下 ...第四步: 查看文件 ...
  • Postman Post请求上传文件

    万次阅读 多人点赞 2018-06-01 14:36:48
    Postman Post请求上传文件一、选择post请求方式二、填写HeadersKey:Content-TypeValue:multipart/form-data[{"key":"Content-Type","value":"multipart/form-data","...
  • 今天小编就为大家分享一篇axios 封装上传文件请求方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 上传文件请求绕过网关

    千次阅读 2019-09-03 23:49:25
    1.本例中,我需要请求上传文件微服务的接口,并且绕过Zuul网关。因为请求会携带图片。如果再通过网关的话,会非常浪费资源。 2.图片上传文件的传输,如果也经过Zuul网关的代理,文件就会经过多次网路传输,造成...
  • 当我们使用postman来测试接口的时候,对于文件上传应该如何配置呢 首先填写请求的 Headers 加入key= Content-Type ,value= multipart/form-data 然后进入Body,选择form-data,填写后台对应接收的名称,类型选择...
  • 今天不是介绍如何使用curl模拟各种GET/POST/PUT/DELETE请求的,而是介绍如何模拟post请求带body参数,以及模拟上传文件。起因是笔者在一次使用curl模拟POST请求带body参数的时候,出现了一个问题,参数能够传给后台...
  • contenttype1.application/x-www-form-urlencoded 请求参数为form-data 以key value的map形式传递 后台以getparameters获取 ... 2.application/json,charset=UTF-8 请求参数为json.stringfy后的json字符串 放在r...
  • 假设接受文件的网页程序位于 http://192.168.29.65/upload_file/UploadFile.假设我们要发送一个图片文件文件名为“kn.jpg”,  首先客户端链接 192.168.24.56 后, 应该发送如下http 请求:  POST/logsys/...
  • axios 封装上传文件请求

    千次阅读 2018-02-28 15:41:58
    axios 和 ajax 都支持异步请求,两者使用方法大同小异,在此使用 axios 上传文件请求。使用的时候只需要在响应的 vue 组件中引入就可以。import Vue from 'vue'; import VueCookie from 'vue-cookie'; import ...
  • postman 请求上传文件

    千次阅读 2019-05-15 19:21:58
    1、选择post方式,并输入请求的链接 2、填写Headers: Key: Content-Type Value: multipart/form-data 3、填写Body,选择form-data,Key的类型选择file,然后在Value中选择文件上传,即可 4、上传多个文件的话...
  • 模拟Http请求上传文件

    2015-08-05 16:11:21
    对于非安卓开发的接口开发人员,模拟请求上传文件用来调试接口。
  • 这里写自定义目录标题java实现调用第三方接口post请求上传文件请求参数为MultipartFile携带token的解决方案 java实现调用第三方接口post请求上传文件请求参数为MultipartFile携带token的解决方案 控制器层: /** * ...
  • HttpURLconnection上传文件
  • 二、POST请求上传文件 1、在Headers里设置 Content-Type 为 multipart/form-data KEY : Content-Type VALUE : multipart/form-data 2、在Body里选择 form-data ,KEY 选择 File 类型 3、在 VAL...
  • 浅析http请求头常见的表单文件上传

    万次阅读 2016-05-06 15:23:35
    当你看到这个格式文件后,应该就理解了原来文件上传的原理就这么简单. 格式规定:每一行都是以回车换行(0xd0xa1310)界定,每一个数据实体都以类似于-----------------------------7d52e1f4065c界定,最后的用户数据...
  • Java模拟post请求上传文件文件流做参)、下载文件、好使的。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 360,051
精华内容 144,020
关键字:

上传文件请求头