网络请求axios与fetch的区别及使用示例手机相册图片上传到服务器的步骤

最新推荐文章于 2024-08-14 00:13:39 发布

liming89

最新推荐文章于 2024-08-14 00:13:39 发布

阅读量655

点赞数 18

文章标签：微信小程序智能手机服务器

文章来源：https://www.piaodoo.com/

本文链接：https://blog.csdn.net/liming89/article/details/137820321

版权

教程下载地址：网赚博客http://www.piaodoo.com/创业项目排行榜前十名http://www.piaodoo.com/

思路：

实现图片上传我们需要使用chooseImg和uploadFile这两个api。
1. 微信小程序中的chooseImg是一个API，用于在用户相册或相机中选择图片上传。它可以让用户在小程序中选择上传图片，以便进行下一步操作，例如将其发送给朋友或将其上传到服务器。
2. 使用chooseImg API，您可以通过以下步骤实现在小程序中选择图片上传：

步骤：

1. 在wxml文件中添加一个按钮或其他可触摸元素，以触发选择图片的操作。

2. 在js文件中使用wx.chooseImage(options)函数来触发选择图片的操作。

3. 在options参数中，可以设置maximum选项以限制用户选择的图片数量，可以设置sizeType选项以限制图片的大小，可以设置sourceType选项以限制图片源（相册或相机）。

4. 选择完成后，可以使用wx.uploadFile(options)函数将图片上传到服务器。

代码：

1. wxml文件：

<button bindtap="choose_UpImage">选择图片进行上传</button>

1. js文件：

Page({
  choose_UpImage: function () {
	    wx.chooseImage({
	      count: 1, //count参数设置为1，表示选择一张图片
	     sizeType: ['original', 'compressed'],//表示选择原图和压缩图两种尺寸的图片。
	     sourceType: ['album', 'camera'],//album表示选择相册来源的图片、camera表示相机来源的图片
	      success: function (res) {
	      //通过res.tempFilePaths获取到选中图片的临时文件路径
	        var tempFilePaths = res.tempFilePaths 
	        wx.uploadFile({
	          url: 'https://网址.com/wave/upload/headImg',
	          //filePath参数设置为tempFilePaths[0]，表示要上传的文件路径，使0用的是选中图片的临时文件路径。
	          filePath: tempFilePaths[0], 
	          //name参数设置为'file”，表示在服务器接收到的文件的name参数的值为file
	          name: 'file',
	          //表示在服务器接收到的文件的formData参数设置为user:test，formData参数的值为user:test
	            formData: {
	              'user': 'test'
	            },
	          success: function (res) {
	             var fanhui_data = res.data 
// {"data":{"src":"statics/uploadfiles/1712036877769.jpg"},"code":0,"msg":""}
	              console.log('上传成功,返回的整体数据========'+fanhui_data)
	              //接受的数据  需要转化为json数据 
	              let JsonSrc =  JSON.parse(fanhui_data)
	              console.log("返回的整体数据进行json转换：",JsonSrc)
	              console.log("上传成功，返回图片的路径========"+JsonSrc.data.src)
	          },
	          fail: function (res) {
	            console.log('上传失败')
	          }
	        })
	      }
	    })
  },
})

教程下载地址：网赚博客http://www.piaodoo.com/创业项目排行榜前十名http://www.piaodoo.com/

一、axios和fetch的区别

Axios 和 Fetch 都是 JavaScript 中用于发送 HTTP 请求的 API，它们的主要区别在以下方面：

1.Axios 支持更广泛的浏览器和 Node.js 版本，而 Fetch 只能在较新的浏览器中使用，或需要使用 polyfill 兼容旧版浏览器。

2.Axios 可以拦截请求和响应，可以全局配置默认的请求头、超时时间等，而 Fetch 目前不支持这些功能。

3.Axios 默认返回 JSON 格式的数据，而 Fetch 返回的是 Response 对象，需要自己通过 Response 的方法（如 json()、text() 等）将结果转换成所需的格式。

4.Axios 对于请求错误可以直接抛出异常，方便进行错误处理，而 Fetch 的错误处理比较繁琐，需要手动检查 Response.ok 属性。

5.fetch是原生js自带的，axios是封装的原生的xhr

二、axios与fetch的使用

axios的导入在上一篇文章

 //axios发送网络请求
        axios.get(`https://api.github.com/search/users?q=${KeyWord}`).then(
        	//成功的回调
            response => {
             	 console.log("请求成功了");
            },
            //失败的回调
            error => {
                 console.log("请求失败了");
            },
    )

fetch的使用：fetch不会直接返回数据，而是先返回是否联系到了服务器，

发送网络请求------fetch
        fetch(`https://api.github.com/search/users?q=${KeyWord}`).then(
            response =>{
                console.log('联系服务器成功了');
                return response.json()
            },
            // error => {
            //     console.log('联系服务器失败了',error);
            //     //返回一个初始化状态的 Promise 中断 .then 链
            //     return new Promise(()=>{})
            // }
        ).then(
            response =>{
                console.log('获取数据成功了',response.items);
            },
            // error => {console.log('获取数据失败了',error);}
    ).catch(
        (error)=&gt;{console.log(error);}
    )

总体来说，Axios 比 Fetch 更易用，功能更强大。但如果只是在现代浏览器中做简单的请求操作，Fetch 也是一个不错的选择

附：fetch 和axios有哪些差异

fetch 和 axios 是两种不同的网络请求库，它们都可以用来向服务器发送 HTTP 请求。但是它们之间有一些差异：

兼容性：fetch 是由浏览器提供的一种原生方法，但是并不是所有浏览器都支持，所以在使用 fetch 的时候需要注意兼容性问题。而 axios 是基于 XHR (XMLHttpRequest) 实现的，所以在使用 axios 的时候不用担心兼容性问题。
使用方式：fetch 的使用方式比较复杂，需要通过 promise 进行链式调用，而且 fetch 并不能发送 PUT、DELETE、PATCH 等请求，需要通过 options 参数进行配置。axios 的