微信小程序实现图片上传

前言

手机上传图片的功能大家一定都用过吧，今天教你用微信小程序实现这个小功能。

实现效果如下：

实现思路：

首先我们需要定义一个存放图片的数组，通过方法拿取图片的详细信息，然后调用微信小程序的 **

wx.uploadFile

** 方法将拿到的图片信息添加到定义好的图片数组中即可；删除图片我们只需要拿到存放图片的数组再通过 **

splice

** 方法删除。

wx.uploadFile(Object object) 方法的参数：

属性类型必填项说明urlstring是开发者服务器地址filePathstring是要上传文件资源的路径 (本地路径)namestring是文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容headerObject否HTTP 请求 Header，Header 中不能设置 RefererformDataObject否HTTP 请求中其他额外的 form datatimeoutfunction否超时时间，单位为毫秒successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

源码文件

wxml文件

<view class="imgBox"><view><text>车辆照片</text></view><view class="imgContant"><van-uploader accept="image" max-count="1" bind:after-read="afterRead" bind:delete="deleteClick" file-list="{{ fileList }}"/></view></view>

js文件

//获取应用实例
var app =getApp();Page({
    data:{
        fileList:[],//图片存放的数组},// 删除照片deleteClick(event){
        var imgData =this.data.fileList;// 通过splice方法删除图片
        imgData.splice(event.detail.index,1);// 更新图片数组this.setData({
            fileList: imgData
        })},// 车辆照片afterRead(event){// loading加载
        wx.showLoading({
            title:'上传中...'});const{file}= event.detail;//获取图片详细信息
        let that =this;//防止this指向问题// 设置请求头，根据项目需求变换
        let Authorization = wx.getStorageSync('key')
        let headers ={'content-type':'','client_id':'webApp','client_secret':'123456',}if(Authorization){
            headers.Authorization ='Bearer '+ Authorization
        }// 调用wx.uploadFile上传图片方法
        wx.uploadFile({
            url:"http://192.168.0.11:8888/api-xian/api-zjmj/zjmj/hmcl/uploadFile",
            method:'POST',
            header: headers,
            filePath: file.url,
            name:'file',
            formData:{
                user:'test'},// 成功回调success(res){// JSON.parse()方法是将JSON格式字符串转换为js对象
                var result = JSON.parse(res.data);// 上传完成需要更新 fileListconst{fileList =[]}= that.data;// 将图片信息添加到fileList数字中
                fileList.push({...file,
                    url: result.data
                });// 更新存放图片的数组
                that.setData({
                    fileList
                });
                wx.hideLoading();//停止loading},});},})

wxss文件

page {
    background: #EFF4FF;}.imgBox {
    font-size:28rpx;
    margin:3%;
    background: white;
    padding:30rpx;
    border-radius:30rpx;
    display: flex;
    align-items: center;}.imgContant {
    margin-left:40rpx;}

至此，这个小功能就实现啦！