Jquery、Axios——上传文件

【Jquery文件上传】
1. 引入Jq插件

Jquery CDN加速地址：https://www.jq22.com/cdn/

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

2. 上传函数

/* 
 1. url 上传地址
 2. file 文件
 */
function uploadImg(url,file){
    const formData = new FormData()
    formData.append("file",file)
    $.ajax({
      method:'POST',
      url,
      data:formData,
      processData:false,
      contentType:false,
      success:(res)=>{
        console.log(res)
      }
    })
  }

【Axios文件上传】
1. 加载依赖并引入依赖

Axios CDN加速地址：https://www.bootcdn.cn/axios/

cnpm i -S axios
import axios from "axios"
//或
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.js"></script>

2. 上传函数

/* 
 1. url 上传地址
 2. file 文件
 */
function uploadImg(url,file){
    const formData = new FormData()
    formData.append("file",file)
    axios({
      url,
      method:"post",
      data: formData,
      headers: { 'Content-Type': 'multipart/form-data;charset=utf-8' }
    }).then(res=>{
      console.log(res)
    })
  }

【通过获取input标签获取File对象上传图片】

//html
<input type="file" name="file">
//js
let file = $("[name=file]")[0].files[0]

【通过网络地址转换成File对象上传图片】

参考文章：https://blog.csdn.net/qq812457115/article/details/125459791