【微信小程序】van-uploader实现文件上传

使用van-uploader和wx.uploadFile实现文件上传，后端使用ThinkPHP。

1、前端代码
json：引入van-uploader

{"usingComponents": {"van-uploader": "@vant/weapp/uploader/index"}
}

wxml：deletedFile是删除文件函数，设置deletable=“{{ true }}” 和在数据中 deletable: true图片右上角会显示删除按钮，在点击删除图标时调用deletedFile函数去处理删除逻辑。beforeRead：是读之前调用函数，afterRead读取文件之后调用的文件。

<!--pages/addFile/addFile.wxml-->
<view style="display: flex;"><van-uploader file-list="{{ fileList }}" max-count="1" deletable="{{ true }}" bind:delete="deletedFile" bind:before-read="beforeRead" bind:after-read="afterRead" accept="image" />
</view><view class="btn-area" style="margin-top: 400rpx;"><button style="margin: 30rpx 0" type="primary" bindtap="submit">提交</button>
</view>

js:

// pages/addFile/addFile.js
var http = require("../../utils/http.js");var config = require("../../utils/config.js");
Page({/*** 页面的初始数据*/data: {fileList: [],fileUrl: "",show: false,sysFileId: null},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {},beforeRead(event) {const {file,callback} = event.detail;callback(file.type === 'image');},deletedFile(event){let fileList = [];this.setData({fileList});this.setData({"sysFileId":null})},afterRead(event) {const {file,callback} = event.detail;let that = this;console.log(file);wx.uploadFile({url: config.domain + '/uploadSysFile', //上传文件接口filePath: file.url,name: 'file',formData: {},success(res) {const data = res.data;let dataRuslt = JSON.parse(data);let fileList = [];fileList.push({"url": config.resourcedomain + "/" + dataRuslt.data.fileUrl,"name": dataRuslt.data.fileName,deletable: true,});that.setData({fileList});that.setData({"sysFileId":dataRuslt.data.sysFileId});}})},submit(event) {//点击提交按钮上传设置banner图数据if(!this.data.sysFileId){wx.showToast({title: '请选择图片！',})return;}var params = {url: "/addBanner",method: "POST",data: {"sysFileId": this.data.sysFileId},callBack: function (res) {wx.navigateBack({url: '/pages/admin/admin'})}};http.request(params);},
})

http工具：

var config = require("config.js");
var app = getApp();
//统一的网络请求方法
function request(params, isGetTonken) {// 全局变量var globalData = getApp().globalData;wx.request({url: config.domain + params.url, //接口请求地址data: params.data,header: {'token': params.login ? undefined : wx.getStorageSync('token')},method: params.method == undefined ? "POST" : params.method,dataType: 'json',responseType: params.responseType == undefined ? 'text' : params.responseType,success: function(res) {const responseData = res.data// 200请求成功if (responseData.code == '200') {if (params.callBack) {params.callBack(responseData.data);}return}// 500if (responseData.code == '500') {wx.showToast({title: responseData.msg,icon: 'none'})return}// E1111用于直接显示提示用户的错误，内容由输入内容决定if (responseData.code == 'E1111') {if (params.errCallBack) {params.errCallBack(responseData)return}wx.showToast({title: responseData.msg || 'Error',icon: 'none'})return}if (!globalData.isLanding) {wx.hideLoading();}},fail: function(err) {wx.hideLoading();wx.showToast({title: "服务器出了点小差",icon: "none"});}})
}})
}
exports.request = request;

config.js:

var baseDomain = "http://localhost:8414/";  //统一接口域名，测试环境
var domain = baseDomain+"index.php"; //统一接口域名，测试环境
var resourcedomain = baseDomain; //统一接口域名，测试环境
var version = "2.1.0";
exports.domain = domain;
exports.version = version;
exports.resourcedomain = resourcedomain;

2、ThinkPHP后端上传文件接口

<?phpnamespace app\controller;use app\BaseController;
use think\Request;
use app\common\CosClient;
use app\model\SysFile;
use think\facade\Config;
use app\model\ClassVideoItem;class SysFileController extends BaseController
{/*** 上传文件cos*/public function uploadSysFile(Request $request){$file = $request->file('file');$fileUpload = Config::get("fileUpload");$storeType = $fileUpload["storeType"];$mimeType = $file->getOriginalMime();$fileName = $file->getOriginalName();if ($storeType == 1) {//本地上传$filePath = "storeFile/";$info = $file->move($filePath, $fileName);$filePath = $filePath . $fileName;$storePath = $filePath;$sysFile = new SysFile();$sysFile->file_name = $fileName;$sysFile->file_url = $filePath;$sysFile->file_type = $mimeType;$sysFile->store_type = 1;$sysFile->save();//保存到数据库return $this->success(["fileUrl" => $storePath,"fileName" => $fileName,"sysFileId" => $sysFile->id,"fileType" => $sysFile->store_type]);} else if ($storeType == 2) {//腾讯云存储对象上传文件$filePath = "tempFile/";$info = $file->move($filePath, $fileName);$filePath = $filePath . $fileName;$storePath = $filePath;$sysFile = new SysFile();$cosFileUrl = CosClient::uploadFile($fileName, $filePath);if (!is_null($cosFileUrl)) {$sysFile->file_name = $fileName;$sysFile->file_url = "https://" . $cosFileUrl;$sysFile->file_type = $mimeType;$sysFile->store_type = 2;$sysFile->save();unlink($filePath);//删除文件$storePath = $cosFileUrl;return $this->success(["fileUrl" => $storePath,"fileName" => $fileName,"sysFileId" => $sysFile->id,"fileType" => $sysFile->store_type]);}}return $this->errorMsg("上传失败识别不到上传方式！");}}

cosClint.php

<?phpnamespace app\common;use think\facade\Config;
use Qcloud\Cos\Client;
use app\common\Util;class CosClient
{public static function uploadFile($fileName = "", $srcPath = ""){try {$qcloudConfig = Config::get("cosClient");$configBucket = $qcloudConfig["bucket"];$configKey = "kexuexiong/" . Util::get_random(9) . $fileName;$file = fopen($srcPath, 'rb');$result = null;if ($file) {$result = CosClient::cosClient()->Upload($bucket = $configBucket,$key = $configKey,$body = $file);}return $result["Location"];} catch (\Exception $e) {echo "$e\n";}}public static function cosClient(){$qcloudConfig = Config::get("cosClient");$secretId = $qcloudConfig["secretId"];$secretKey = $qcloudConfig["secretKey"];$region = $qcloudConfig["region"];$cosClient = new Client(array('region' => $region,'schema' => 'https','credentials' => array('secretId'  => $secretId,'secretKey' => $secretKey)));return $cosClient;}
}

配置文件cosClint.php

<?phpreturn  ["secretId" =>"",//替换为用户的 secretId，请登录访问管理控制台进行查看和管理，https://console.cloud.tencent.com/cam/capi"secretKey" => "", //替换为用户的 secretKey，请登录访问管理控制台进行查看和管理，https://console.cloud.tencent.com/cam/capi"region" => "", //替换为用户的 region，已创建桶归属的region可以在控制台查看，https://console.cloud.tencent.com/cos5/bucket"token" => "COS_TMPTOKEN", //如果使用永久密钥不需要填入token，如果使用临时密钥需要填入，临时密钥生成和使用指引参见https://cloud.tencent.com/document/product/436/14048"bucket" => ""
];

配置文件fileUpload.php：

<?phpreturn  ["storeType" => 1,//配置开启的上传方式"domain" => "http://localhost:8414/",
];

效果图：