精华内容
下载资源
问答
  • axios 文件上传
    2021-06-30 16:39:33
      let config = {
              onUploadProgress: progressEvent => {
                let complete = (progressEvent.loaded / progressEvent.total).toFixed(2) * 100
                console.log(complete)
                this.percentage = complete
                if (complete >= 100) {
                  this.fileStatus = 'success'
                }
              }
            }

    更多相关内容
  • 今天小编就为大家分享一篇axios 封装上传文件的请求方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本文实例为大家分享了axios实现文件上传功能的具体代码,供大家参考,具体内容如下 前台页面: 引入axios js文件 [removed][removed] HTML: <input type=file name=img/> ()>上传图片 JS: function ...
  • vue 的axios 文件上传

    2022-06-28 15:28:12
    vue 的axios 文件上传

     

     具体方法

    Upload(file) {  
      console.log(file.file);//获取文件对象
      var formData = new FormData();//新建表单对象
    	formData.append("file",file.file);//把文件对象添加到表单对象里
    	formData.append("filename", file.file.name);//把文件名称添加到表单对象里
      var that=this;
      // 此时可以自行将文件上传至服务器
       that.$axios.post("/api/UploadFile",formData).then((res) => {
    	  console.log(res);
    	 if(res.code==10000 )
    	 {
    		debugger
    	 }
    	 else{
    		console.error(res.msg);
    	  }
      });
    }

    文件对象的格式

    lastModified: 1631530809009
    lastModifiedDate: Mon Sep 13 2021 19:00:09 GMT+0800 (中国标准时间) {}
    name: "微信图片_20210913185924.jpg"
    size: 319765
    type: "image/jpeg"
    webkitRelativePath: ""

    延伸阅读

    c# net , layui文件上传,手写-普通文件上传,上传并添加水印,上传并生成缩略图,上传并删除指定文件,_cplvfx的博客-CSDN博客_c# layui 上传c# net , layui文件上传,手写-普通文件上传,上传并添加水印,上传并生成缩略图,上传并删除指定文件,https://blog.csdn.net/cplvfx/article/details/125183935

    展开全文
  • 主要介绍了vue使用axios上传文件(FormData)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue+Axios 上传 自定义进度条

    前文: 之前一直用Elemet-UI的upload组件,但是ui给出的样式Element-UI满足不了,所以决定自己写一个玩玩

    总体分三步:

    1. 页面布局(自定义上传组件样式)
    2. Axios上传
    3. 监听Process 联动页面实现进度条

            成果

     

    1、页面布局

    <div class="display-upload-wrapper">
    
      <div class="innier-upload-wrapper" :style="innerUploadStyle">
    
         自定义的upload样式
    
         <div v-if="fileInfo">{{ fileInfo.name }}.{{ fileInfo.format }} 上传完成</div>
    
       </div>
    
    </div>
    
    <input id="upload-file" ref="uploadInput" type="file" @change="getFile">

    通过input file 上传文件 ,原生的upload input 太丑了,好多人是不是都忘接了什么样子了,我帮大家回忆一下

    我们可以通过css隐藏这个文件,让后用js 给其他的dom绑定上这个input的点击事件实现

    CSS

    .display-upload-wrapper {
      border: 1px solid red;
      width: 384px;
      height: 54px;
      cursor: pointer;
      width: 244px;
      border-radius: 4px;
      background: #F4F8FF;
      .innier-upload-wrapper {
        height: 100%;
        background: linear-gradient(270deg, #C0D8FF 0%, #E7F2FF 100%);
        background-repeat: no-repeat;
        background-size: 10% 100%;
        transition: background-size .3s linear;
      }
    }
    #upload-file {
      display: none;
    }

    js

    document.querySelector('.display-upload-wrapper').onclick = function() {
      document.querySelector('#upload-file').click()
    }

    这样点击就可以调起文件选择

    2、Axios上传

    获取到选中的文件

     getFile() {
       const file = this.$refs.uploadInput.files[0]
        if (!file) return
        // 获取到的file用FormData处理成表单键值对
        const formData = new FormData()
        formData.append('file', file)
       //uplaodFileApi是文件上传的api 第一个入参为上传的文件,第二个入参为上传的进度的回调
        uplaodFileApi(formData, this.onProcess).then(res => {
          console.log('uplaodFileApi succ: ', res)
          const { success, msg, data } = res
          if (success) {
            this.fileInfo = data
          }
        })
      },

        获取到的file用FormData处理成表单键值对
        const formData = new FormData()
        formData.append('file', file)Axios的入参为

    {
        "method":"POST",
        "url":"/jz/boss/public/upload/b",
        "data":{
    
        },
        "params":{
            "appToken":"xxxxxxxxxxxxxxxxxxxxx ="
        },
        "withCredentials":true,
        "headers":{
            "Content-Type":"multipart/form-data;charset=UTF-8"
        },
        "responseType":""
    }

    data的值就是传入的fromData,控制台直接打印不出的

    要注意的是 headers的Content-Type 要设置成multipart/form-data;charset=UTF-8 "

    Content-Type":"multipart/form-data;charset=UTF-8"

    做完这些操作我们就可以上传成功了

    3、监听Process 联动页面实现进度条

    Axios提供了onUploadProgress的回调

    所有原生的processs的处理都可以,下面的图就是这个回调的progressEvent

    用total 和loaded我们就可以算出进度条的百分比

    onProcess(e) {
      const { loaded, total } = e
      const uploadPrecent = ((loaded / total) * 100) | 0
      this.uploadPrecent = uploadPrecent
    },

    完整代码 

    <template>
      <div>
        {{ uploadPrecent }}%
        <div class="display-upload-wrapper">
          <div class="innier-upload-wrapper" :style="innerUploadStyle">
            自定义的upload样式
            <div v-if="fileInfo">{{ fileInfo.name }}.{{ fileInfo.format }} 上传完成</div>
          </div>
        </div>
        <input id="upload-file" ref="uploadInput" type="file" @click="clearPreUpload" @change="getFile">
      </div>
    </template>
    
    <script>
    import { uplaodFileApi } from '@/api/uploadApi'
    import { UploadStatus } from './format'
    export default {
      name: 'Myupload',
    
      data() {
        return {
          uplaodStatus: UploadStatus.wait,
          uploadPrecent: 0,
          timer: undefined,
          fileInfo: undefined
        }
      },
      computed: {
        innerUploadStyle() {
          return `background-size: ${this.uploadPrecent}% 100%;`
        }
      },
      mounted() {
        this.bindUplaodClickToDisplayUplaod()
      },
    
      methods: {
        bindUplaodClickToDisplayUplaod() {
          document.querySelector('.display-upload-wrapper').onclick = function() {
            document.querySelector('#upload-file').click()
          }
        },
        getFile() {
          const file = this.$refs.uploadInput.files[0]
          if (!file) return
          const formData = new FormData()
          formData.append('file', file)
          uplaodFileApi(formData, this.onProcess).then(res => {
            const { success, msg, data } = res
            if (success) {
              this.fileInfo = data
            }
          })
        },
        onProcess(e) {
          const { loaded, total } = e
          const uploadPrecent = ((loaded / total) * 100) | 0
          this.uploadPrecent = uploadPrecent
        },
        clearPreUpload() {
    
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
      .display-upload-wrapper {
        border: 1px solid red;
        width: 384px;
        height: 54px;
        cursor: pointer;
        width: 244px;
        border-radius: 4px;
        background: #F4F8FF;
        .innier-upload-wrapper {
          height: 100%;
          background: linear-gradient(270deg, #C0D8FF 0%, #E7F2FF 100%);
          background-repeat: no-repeat;
          background-size: 10% 100%;
          transition: background-size .3s linear;
        }
      }
      #upload-file {
        display: none;
      }
    </style>
    

     这个请求代码删减过 仅供参考可以理解为 伪代码

    const HttpRequest = (type, option) => {
      const options = {
        expirys: true,
        ...option
      }
      return new Promise((resolve, reject) => {
        const queryParams =
          {
              method: type,
              url: options.url,
              data: options.data,
              params: { appToken: requestToken() },
              withCredentials: true,
              headers: options.header ? options.header : DEFAULT_HEADER,
              responseType: options.responseType || ''
            }
        // 如果有onProcess就给axios绑定onUploadProgress回调
        if (options.onProcess) {
          queryParams.onUploadProgress = options.onProcess
        }
        if (options.timeout) {
          queryParams.timeout = options.timeout
        }
        axios(queryParams)
          .then(
            res => {
              const { data = {}, headers = {} } = res || {}
              const result = Object.assign(data, headers)
              resolve(result)
            },
            err => {
              reject(err)
            }
          )
          .catch(error => {
            reject(error)
          })
          .finally(() => {})
      })
    }

    展开全文
  • 以前的项目写过文件上传就将代码复制了过来,然后两个项目的axios版本不一样,0.21.1和0.27.1 export function avatar(form) { let headers = { 'Content-Type': 'multipart/form-data' } return request({ url...

    我遇到的坑,axios版本问题

    以前的项目写过文件上传就将代码复制了过来,然后两个项目的axios版本不一样,0.21.1和0.27.1

    export function avatar(form) {
        let headers = {
            'Content-Type': 'multipart/form-data'
        }
        return request({
            url: '/user/profile/avatar',
            method: 'post',
            headers,
            data: form
        })
    }
    
    upload(param) {
      let forms = new FormData();
      forms.append("file", param.file);
      avatar(forms).then((res) => {
        console.log(res);
      });
    },
    

    同样的代码,在0.21的版本中multipart/form-data后面就会带有boundary,然而在0.27的版本中,怎么改都没有boundary
    至于这两个版本具体有什么问题我也不清楚

    展开全文
  • 上传 上传代码: 采用iview组件上传 <Upload :action="uploadApi" multiple :headers="jwt" :data="uploadData" :on-success="uploadsuccess" :on-error="uploadFaild" :on-progress="uplo
  • 下面给大家介绍使用axios实现上传图片进度条功能,具体内容介绍如下所示:  在最近做的项目中,一个手机页面最多要上传几十张图片,虽然对照片做了压缩处理,不过最后还是很大,如果网卡的话,上传的时间很差,如果...
  • axios上传文件

    千次阅读 2022-04-29 09:41:51
    import axios from 'axios' // eslint-disable-next-line no-unused-vars import { Message } from 'element-ui' // import store from '@/store' // create an axios instance let base = '' // 判断环境变量 if ...
  • 主要介绍了vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 最近在学习axios,然后项目就用到了,所以这篇文章主要给大家介绍了关于vue中利用axios实现文件上传进度的实时更新的相关资料,文中先对axios进行了简单的介绍,方法大家理解学习,需要的朋友们下面随着小编来一起...
  • 本次使用http-request自定义文件上传: 上传头像 备注:不要自己设置请求头类型,让浏览器自己解析,如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误(415错误Unsupported Media ...
  • vue axios上传文件

    2022-08-02 14:38:02
    vue axios上传文件
  • axios 实现 文件上传

    千次阅读 2021-06-11 10:43:08
    前端代码 <input type="file" ref="upload" > upload(){ var objfile = this.$refs.upload.files[0]; ... // this.$message.info("文件不能大于1MB") // return false; // } // conso
  • axios上传文件+参数

    千次阅读 2021-10-08 15:45:44
    1.需要将请求头的Content-Type设置为...3.将上传的参数需要使用FormData类型数据,参数和文件以键值对形式放入FormData中 //request封装 export function uploadFile(fd){ return request({ url: ..., metho
  • elementui+vue+axios完成文件上传
  • 使用axios进行文件上传

    千次阅读 2020-08-20 19:44:28
    此方法主要是使用FormData数据进行文件上传;FormData是XMLHttpRequest Level2提供的一个接口对象,提供了一种表单数据的键值对的构造方法,经过它的数据处理可以使用XMLHttpRequest.send( )方法送出;如果送出时...
  • 主要为大家详细介绍了axios实现文件上传并获取进度,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了axios+Vue上传文件显示进度效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • axios是什么? Axios是通过Promise实现XHR封装,其中Promise是控制手段,XHR是实际发送Http请求的客户端。都是AJAX技术的一种具体实现。 因为vue的火爆让axios成为现在比较流行的异步请求方式。本文章只是针对新手...
  • vue+axios实现文件上传

    2022-02-28 16:21:57
    <!... <... <head> ...meta charset="UTF-8">...上传文件</title> <script src="js/vue.js"></script> <script src="js/axios-0.18.0.js"></script> </head> <bo
  • axios请求接口
  • FormData 接口提供了一种... axios使用Form方式: 如果需要同时上传文件和参数: 错误方式: 正确方式: 这里需要注意formdata.append("file",file.raw) 和formdata.append("id","1")它们key的名称必须和后台接收的一致
  • 文件上传 文件上传几乎我们天天都在使用,在工作中也会遇到这样的需求。那么我们如何前端和后端配合上传文件呢? 完整案例下载 我们在开始讲解之前,我已经提前为大家准备了一个前后端完整的案例 gitee地址: 上传...
  • 文件上传 先实现上传函数 // 上传方法 import axios from 'axios' function upload (file) { const formData = new FormData() formData.append('file', file) // 'file'为文件名,file为文件 /* 若需要带参数...
  • axios 上传/下载文件

    千次阅读 2021-11-27 23:12:02
    下载文件 //请求 ...then(response => { const fileName = res.headers['content-disposition'].split('=')[1] const url = URL.createObjectURL(response.data) const link = document.createElement('a') /...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,091
精华内容 6,036
关键字:

axios 文件上传