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

news2024/11/18 6:20:27

使用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/",
];

效果图：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/831396.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

React入门学习笔记2

React入门学习笔记2

jsx语法规则 定义虚拟DOM时&#xff0c;不要写引号。标签中混入JS表达式时要用{ }。样式的类名指定不要用class&#xff0c;要用className。内联样式&#xff0c;要用style{{key&#xff1a;value}}的形式去写。只有一个根标签标签必须闭合标签首字母 )若小写字母开头&#xf…
阅读更多...
C语言技巧 ----------调试----------程序员必备技能

C语言技巧 ----------调试----------程序员必备技能

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; &#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382;…
阅读更多...
pytorch中torch.einsum函数的详细计算过程图解

pytorch中torch.einsum函数的详细计算过程图解

第一次见到 rel_h torch.einsum(“bhwc,hkc->bhwk”, r_q, Rh)这行代码时&#xff0c;属实是懵了&#xff0c;网上找了很多博主的介绍&#xff0c;但都没有详细的说明函数内部的计算过程&#xff0c;看得我是一头雾水&#xff0c;只知道计算结果的维度是如何变化的&#xf…
阅读更多...
IDEA使用数据库（新手入门详细教程）

IDEA使用数据库（新手入门详细教程）

第一步:将数据库服务器打开 进入你下载好的数据库路径到bin目录下cmd打开命令提示符界面 确认启动数据库 第二步&#xff1a;打开IDEA&#xff0c;找到IDEA数据库 第三步&#xff1a;选择要连接数据库 第四步&#xff1a;根据数据库信息连接数据库 连接之前的页面 输入我们要的…
阅读更多...
常温超导：AI在研发中的潜力

常温超导：AI在研发中的潜力

目录 引言&#xff1a;1. 常温超导的挑战&#xff1a;2. AI在材料研究中的作用&#xff1a;3. AI在理论模型中的作用&#xff1a;4. AI与实验室合作的潜力&#xff1a;结论&#xff1a; 引言&#xff1a; 常温超导一直被认为是科学界的“圣杯”&#xff0c;可以在室温条件下实…
阅读更多...
谷歌seo推广怎么做

谷歌seo推广怎么做

谷歌SEO&#xff08;搜索引擎优化&#xff09;推广是提高网站在谷歌搜索结果中的排名&#xff0c;从而获得更多有针对性的流量和潜在客户的过程。以下是一些关键步骤&#xff0c;帮助您进行谷歌SEO推广&#xff1a; 关键词研究&#xff1a;首先&#xff0c;进行详细的关键词研究…
阅读更多...
公司植物日常护养方法备忘录

公司植物日常护养方法备忘录

植物为我们净化空气&#xff0c;美化环境&#xff0c;我们要按照科学的经验照顾好它们。公司植物日常通用护养方法如下&#xff1a; 首先剪掉已经枯黄的部分。 需要晒太阳的植物按时搬到外面晒太阳&#xff0c;每次晒1到2个小时。 所有植物统一在每个月的20号左右施肥一次&am…
阅读更多...
链表(二) 双链表操作详解

链表(二) 双链表操作详解

文章目录 四、双向带头循环链表的实现List.hList.c创建返回链表的头结点双向链表打印双向链表尾插双向链表尾删双向链表头插双向链表头删双向链表查找双向链表在pos的前面进行插入双向链表删除pos位置的节点 五、单链表与双链表比较 什么是链表及单链表的实现请跳转&#xff1a…
阅读更多...
JS监听页面回退前进的方案

JS监听页面回退前进的方案

您好&#xff0c;如果喜欢我的文章&#xff0c;可以关注我的公众号「量子前端」&#xff0c;将不定期关注推送前端好文~ 前言 在业务中遇到需求&#xff0c;App中的H5页面跳转到其他外链页面&#xff0c;外链页面修改了整个APP中的导航栏样式&#xff0c;回退到当前页面&…
阅读更多...
微信开发之自动回复的技术实现

微信开发之自动回复的技术实现

请求URL&#xff1a; http://域名地址/sendText 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明wId是string登录实例标识wcId是string接收…
阅读更多...
人物宣传稿怎么写？写作技巧有哪些？

人物宣传稿怎么写？写作技巧有哪些？

人物宣传稿是一种介绍个人或组织成员的文案&#xff0c;旨在宣传其成就、特点和影响力。以下是一些人物宣传稿的写作技巧&#xff0c;帮助您撰写出生动、引人入胜的宣传稿。接下来伯乐网络传媒就来给大家讲解一下。 突出核心信息&#xff1a; 在宣传稿的开头&#xff0c;用简洁…
阅读更多...
ARTS 挑战打卡的第1天，我学到了这些~

ARTS 挑战打卡的第1天，我学到了这些~

关于 ARTS 的释义 —— 每周完成一个 ARTS&#xff1a; ● Algorithm: 每周至少做一个 LeetCode 的算法题 ●Review: 阅读并点评至少一篇英文技术文章 ● Tips: 学习至少一个技术技巧 ● Share: 分享一篇有观点和思考的技术文章 深度学习 深度学习概念崛起框架 主页传送门&…
阅读更多...
在线思维导图怎么绘制？学学这几种绘制方法

在线思维导图怎么绘制？学学这几种绘制方法

在线思维导图怎么绘制&#xff1f;思维导图是一种非常有效的学习和工作工具&#xff0c;可以帮助我们更好地组织和呈现信息&#xff0c;提高学习效率和工作效率。而在线思维导图的出现&#xff0c;更是为我们的绘制带来了极大的便利。现在也有很多绘制思维导图的方法&#xff0…
阅读更多...
【RedisInsight】连入Docker容器可视化redis服务

【RedisInsight】连入Docker容器可视化redis服务

文章目录 下载安装RedisInsight添加数据库添加docker容器内的redis数据库 下载安装RedisInsight 进入redis官网下载&#xff1a;https://redis.com/redis-enterprise/redis-insight/&#xff0c;安装过程一路Next即可。 打开桌面上的快捷方式启动&#xff1a;RedisInsight-v2…
阅读更多...
windows创建占用特定端口程序

windows创建占用特定端口程序

默认情况下&#xff0c;远程桌面使用的是3389端口。如果您想将远程桌面端口更改为8005&#xff0c;以达到模拟程序占用端口8005的情况&#xff0c;可以执行以下操作&#xff1a; 如执行以下命令&#xff0c;则1&#xff0c;2&#xff0c;3步相同操作可以跳过&#xff0c;直接往…
阅读更多...
C++ 好用的日志库--spdlog

C++ 好用的日志库--spdlog

背景 spdlog 是一个快速、异步的、header-only 的 C 日志库。它提供了简单易用的 API 并具有高性能和可扩展性。 下载和使用 下载 spdlog 库下载地址&#xff1a;github 链接 hello world 在使用时只需要 include 整个 /include/spdlog 文件夹即可。 #include "spd…
阅读更多...
【excel技巧】进阶版：excel文件批量提取文件名

【excel技巧】进阶版：excel文件批量提取文件名

前面给大家分享了简单的excel提取文件名方法&#xff0c;今天继续分享&#xff0c;进阶版excel文件批量提取文件名的方法。 点击excel工具栏中的【数据】功能&#xff0c;点击获取数据 – 来自文件 – 从文件夹 然后找到需要提取文件名的文件夹&#xff0c;点击打开&#xff0…
阅读更多...
直线导轨使用中常见的问题有哪些？

直线导轨使用中常见的问题有哪些？

直线导轨作为设备的核心部件之一&#xff0c;起着导向和支撑的作用功能。目前&#xff0c;已被广泛应用在各行各业中&#xff0c;大到机械设备&#xff0c;小到抽屉&#xff0c;我们都能看到直线导轨的身影&#xff0c;可以说&#xff0c;直线导轨已经悄无声息的进入到我们的生…
阅读更多...
OC与Swift的相互调用

OC与Swift的相互调用

OC调用Swift方法 1、在 Build Settings 搜索 Packaging &#xff0c;设置 Defines Module 为 YES 2、新建 LottieBridge.swift 文件&#xff0c;自动生成桥 ProductName-Bridging-Header.h 3、在 LottieBridge.swift 中&#xff0c;定义Swift类继承于OC类&#xff0c;声明 obj…
阅读更多...
站点可靠性工程 （SRE）

站点可靠性工程 （SRE）

随着世界各地的组织努力开发安全、可靠、可扩展且可持续的 IT 基础架构&#xff0c;对高效基础架构监控和管理的需求日益增长&#xff0c;企业正在用不可扩展的遗留架构换取现代解决方案&#xff0c;在尖端技术的推动下&#xff0c;这些使基础设施管理过程更加顺畅和轻松&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023