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

这篇具有很好参考价值的文章主要介绍了【微信小程序】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
      }

      // 500
      if (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后端上传文件接口

<?php

namespace 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

<?php

namespace 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

<?php

 return  [
    "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:

<?php

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

效果图:
【微信小程序】van-uploader实现文件上传,文件上传,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-623915.html

到了这里,关于【微信小程序】van-uploader实现文件上传的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】Vant Weapp 组件 uploader文件上传

    wxml中: json中: js中:

    2024年02月16日
    浏览(58)
  • 微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到

    下面模拟小白引入vant所遇到的问题与[ app.json 文件内容错误] [\\\"van-button\\\"]: \\\"@vant/weapp/button/index\\\" 未找到 1,利用npm引入vant组件,在目录下初始化组件库 命令:npm init 按ENTER键直到最后回yes好了 2,npm i vant-weapp -S --production 3,回到小程序构建npm 4,此时可能会出现这样的一个问题

    2024年02月11日
    浏览(54)
  • 【微信小程序】[ app.json 文件内容错误] app.json: [“usingComponents“][“van-button“]: “@vant/weapp/button/index“ 未找

     一、问题描述 1.bug 2.本地设置 详情   本地设置       里面没有  “使用npm模块”  选项        (反正我是找不到) 二、问题原因 按照官方文档和步骤操作后,文件配置如下:  打开miniprogram_npm文件夹    此时问题就很明显了 这样的写法是错误的 三、解决方法 正确写

    2024年02月16日
    浏览(43)
  • 微信小程序报错[ app.json 文件内容错误] app.json: [“usingComponents“][“van-button“]: “@vant/weapp/lib/button/index

    从git上拉取项目构建npm后,报出如下错误: 指出文件找不到,无法使用button组件,是文件路径出错,首先找到项目中的button文件, 复制路径后,更改app.json中usingComponents的van-button路径, 问题解决。 总结:文件路径出错,找到文件,更新路径。

    2024年02月11日
    浏览(54)
  • 微信小程序使用van-steps详解

    vant官网代码如下 问题1:官网代码用在小程序上无效果 这里发现小程序的vant包里有 steps 没有step 因此官网写法无效。 解决方法 正确写法如下所示 页面wxml js 最终效果 问题2:steps数组中如何设置其他字段 (1)找到vant的包 (2)找到steps的index.wxml文件 (3)下面红框里是ste

    2024年02月16日
    浏览(34)
  • 微信小程序使用van组件Tabbar 标签栏

    (1)打开我们小程序的项目目录,然后打开文件所在的位置。 (2)cmd 窗口初始化 (3)通过 npm 安装vant/weapp (4)安装 miniprogram (5)修改 app.json app.json 中的 “style”: “v2” 去除 (6)修改 project.config.json 开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在

    2024年02月06日
    浏览(40)
  • 微信小程序整合vantweapp van-field遇到的坑?

    最低基础库版本在 2.9.3 以上时,可以使用简易双向绑定。 但是在双向绑定的时候,发现有一个层级关系 在用户添加地址,和van-popup、van-area结合使用的时候,点击输入框,弹出选择地址的框,此时发现用户仍然可以输入,我就想到了禁用,但是发现禁用会置灰,给用户一种

    2024年02月11日
    浏览(69)
  • 使用van-dialog二次封装微信小程序模态框

    由于微信小程序的wx.showModal不支持富文本内容,无法实现更灵活的展示效果,故需要进行二次封装 实现思路:使用van-dialog以及微信小程序的rich-text实现 代码如下: 使用方法 本文仅提供一种思路,可能不是最优写法,欢迎大家讨论留言

    2024年02月07日
    浏览(45)
  • 微信小程序封装自定义van-dropdown-item 下拉选择框

    1.vant weapp虽然给我们提供了van-dropdown-item且美观的组件但是没有插槽无法自定义内容,限制了各位大神的操作,接下来我们先来了解他的使用在去封装自己的自定义 这是官方自己的效果! 下面来看看我们自己封装的组件 2.还能自定义搜索框等等是不是很奈斯! 接下来我们在

    2024年02月11日
    浏览(47)
  • 完美解决微信小程序使用复选框van-checkbox无法选中

    由于小程序使用了vant-ui框架,导致checkbox点击无法选中问题   记得定义 checked 默认值   解决办法 : 添加onChange事件,给 checked 做赋值操作。 可以打印看看console.log(e) 选中效果: 取消选中效果:    

    2024年02月12日
    浏览(78)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包