【微信小程序】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/",
];

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Linux 网络】 传输层协议之TCP协议 TCP的三次握手和四次挥手

【Linux 网络】 传输层协议之TCP协议 TCP的三次握手和四次挥手

TCP协议 TCP协议段格式谈谈什么是 “可靠” 和 “不可靠”TCP协议段——序号与确认序号TCP协议段——窗口大小TCP协议段 —— 六个标志位确认应答机制&#xff08;ACK&#xff09;超时重传机制连接管理机制TCP 的三次握手四次挥手TCP三次握手四次挥手总结图 滑动窗口流量控制拥…
阅读更多...
HCIP中期实验

HCIP中期实验

1、该拓扑为公司网络&#xff0c;其中包括公司总部、公司分部以及公司骨干网&#xff0c;不包含运营商公网部分。 2、设备名称均使用拓扑上名称改名&#xff0c;并且区分大小写。 3、整张拓扑均使用私网地址进行配置。 4、整张网络中&#xff0c;运行OSPF协议或者BGP协议的设备…
阅读更多...
LabVIEW深度相机与三维定位实战（下）

LabVIEW深度相机与三维定位实战（下）

‍‍&#x1f3e1;博客主页&#xff1a; virobotics的CSDN博客&#xff1a;LabVIEW深度学习、人工智能博主 &#x1f384;所属专栏&#xff1a;『LabVIEW深度学习实战』 &#x1f37b;上期文章&#xff1a;『LabVIEW深度相机与三维定位实战&#xff08;上&#xff09;』 &#…
阅读更多...
Chrome 75不支持保存成mhtml的解决方法

Chrome 75不支持保存成mhtml的解决方法

在Chrome 75之前&#xff0c;可以设置chrome://flags -> save as mhtml来保存网页为mhtml。 升级新版&#xff0c;发现无法另存为/保存网页为MHTML了。 参考https://jingyan.baidu.com/article/a3761b2b7e39ec5576f9aad9.html 在网上搜索无果后&#xff0c;只得从chromium项…
阅读更多...
npm i 报错项目启动不了解决方法

npm i 报错项目启动不了解决方法

1.场景 在另一台电脑低版本node环境跑的react项目&#xff0c;换到另一台电脑node18环境执行npm i时候报错 2.解决方法 脚本前加上set NODE_OPTIONS--openssl-legacy-provider
阅读更多...
医学影像PACS系统源码：多功能服务器和阅片系统

医学影像PACS系统源码：多功能服务器和阅片系统

PACS系统是以最新的IT技术为基础&#xff0c;遵循医疗卫生行业IHE/DICOM3.0和HL7标准&#xff0c;开发的多功能服务器和阅片系统。通过简单高性能的阅片功能&#xff0c;支持繁忙时的影像诊断业务&#xff0c;拥有保存影像的院内Web传输及离线影像等功能&#xff0c;同时具有备…
阅读更多...
echarts实现立体柱状图

echarts实现立体柱状图

实现效果图如下&#xff1a; 上面除了立体图之外还增加了背景图。注意&#xff0c;可以发现这个图的右下角是是和x轴平齐的&#xff0c;如果右下角也要折角&#xff0c;可以根据代码修改下描点的点位就可以了。 完整代码如下&#xff1a; <template><div id"ba…
阅读更多...
基于C#的窗体阴影效果方案 - 开源研究系列文章

基于C#的窗体阴影效果方案 - 开源研究系列文章

最近在研究C#的Winform窗体的效果&#xff0c;上次介绍了窗体动画效果的博文( 基于C#的无边框窗体动画效果的完美解决方案 - 开源研究系列文章 )&#xff0c;这次将窗体阴影效果的方案进行一个介绍。 找了一下度娘&#xff0c;具体窗体阴影效果就两种方法&#xff1a;直接绘制和…
阅读更多...
前端Vue入门-day08-vant组件库

前端Vue入门-day08-vant组件库

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 vant 组件库 安装 导入 全部导入 按需导入 浏览器配饰 Viewport 布局 Rem 布局适配 vant 组件库 …
阅读更多...
ssh安全远程管理

ssh安全远程管理

目录 1、什么是ssh 2、ssh登陆 3、ssh文件传输 1、什么是ssh ssh是 Secure Shell 的缩写&#xff0c;是一个建立在应用层上的安全远程管理协议。ssh 是目前较为可靠的传输协议&#xff0c;专为远程登录会话和其他网络服务提供安全性。利用ssh 协议可以有效防止远程管理过程中…
阅读更多...
MySQL常见问题处理(三)

MySQL常见问题处理(三)

MySQL 常见问题解决 夕阳留恋的不是黄昏&#xff0c;而是朝阳 上一章简单介绍了MySQL数据库安装(二), 如果没有看过, 请观看上一章 一. root 用户密码忘记&#xff0c;进行重置操作 复制内容来源链接: https://blog.csdn.net/weixin_48927364/article/details/123556927 一.…
阅读更多...
谷粒商城第八天-商品服务之品牌管理的整体实现（直接使用逆向生成的代码；含oss文件上传）

谷粒商城第八天-商品服务之品牌管理的整体实现（直接使用逆向生成的代码；含oss文件上传）

目录 一、总述 二、前端部分 2.1 创建好品牌管理菜单 2.2 复制组件 ​编辑2.3 复制api ​​​编辑 2.4 查看效果 ​编辑2.5 需要优化的地方 2.6 具体优化实现 2.6.1 优化一&#xff1a;将表格的状态列&#xff08;这里是是否显示列&#xff09;修改为开关&#xff…
阅读更多...
JS解析JSON

JS解析JSON

在 JavaScript 中解析 JSON 数据 在 JavaScript 中&#xff0c;您可以使用 JSON.parse() 方法来解析 JSON 数据&#xff0c;示例代码如下&#xff1a; var json {"course": {"name": "JavaScript","author": "http://c.bianch…
阅读更多...
【2023.8】docker一键部署wvp-GB28181-pro和ZLMediaKit过程全记录

【2023.8】docker一键部署wvp-GB28181-pro和ZLMediaKit过程全记录

安装docker 使用的操作系统是ubuntu20.04 如何在 Ubuntu 20.04 上安装和使用 Docker https://developer.aliyun.com/article/762674 docker拉取配置好的ZLMediaKIt和wvp-GB28181-pro docker pull 648540858/wvp_pro第一次运行 docker一键运行ZLMediaKIt和wvp-GB28181-pro …
阅读更多...
Linux的基本指令（2）

Linux的基本指令（2）

指令1&#xff1a;man 作用&#xff1a;可以查询linux指令语法内容。 格式&#xff1a; man 指令 安装man指令&#xff1a; yum install -y man-pages 例如&#xff1a; 查询 指令 ls 的语法内容。 man ls 查询 fork 指令的语法内容。 man fork 在man中存在9个手册&…
阅读更多...
【设计模式——学习笔记】23种设计模式——观察者模式Observer（原理讲解+应用场景介绍+案例介绍+Java代码实现）

【设计模式——学习笔记】23种设计模式——观察者模式Observer（原理讲解+应用场景介绍+案例介绍+Java代码实现）

文章目录 案例引入原始方案实现实现问题分析 介绍基础介绍登场角色 案例实现案例一类图实现分析 案例二类图实现 观察者模式在JDK源码的应用总结文章说明 案例引入 有一个天气预报项目&#xff0c;需求如下&#xff1a; 气象站可以将每天测量到的温度、湿度、气压等等以公告的…
阅读更多...
JMeter（二十四）、使用吞吐量控制器实现不同的用户操纵不同的业务

JMeter（二十四）、使用吞吐量控制器实现不同的用户操纵不同的业务

一、需求 需求&#xff1a;博客系统&#xff0c;模拟用户真实行为&#xff0c;80%的用户阅读文章&#xff0c;20%的用户创建文章&#xff0c;创建文章的用户随机的删除或者修改文章。 二、脚本实现 80%的用户查看文章 20%用户创建文章 根据post_id是否能整除2&#xff0c;决…
阅读更多...
【vue】 el-table解决分页不能筛选全部数据的问题

【vue】 el-table解决分页不能筛选全部数据的问题

前言 最近开发前端项目表格的时候&#xff0c;使用的是el-table&#xff0c;用到了对应的筛选功能&#xff0c;如下图所示 但发现实际只能筛选当前页&#xff0c;通过百度查找相关文章&#xff0c;发现原因是把筛选条件定义在列上&#xff0c;解决方法&#xff1a;所以我们把f…
阅读更多...
使用 Simulink 进行 STM32 编程

使用 Simulink 进行 STM32 编程

目录 介绍 所需材料 步骤 1&#xff1a;在MATLAB中设置STM32-MAT软件路径步骤 2&#xff1a;在STM32CubeMX中创建一个项目步骤 3&#xff1a;配置时钟和 GPIO 引脚步骤 4&#xff1a;项目经理并生成代码步骤 5&#xff1a;在 Simulink 中创建模型步骤 6&#xff1a;在模型中插…
阅读更多...
Systemui的介绍以及与普通应用的差异

Systemui的介绍以及与普通应用的差异

一.SystemUI的介绍 简介 SystemUI是Android操作系统的一个关键组件&#xff0c;主要负责管理和提供用户界面的核心元素&#xff0c;如状态栏、导航栏和锁屏界面等。从下面两点出发了解SystemUI的特性&#xff1a; 一下就是systemui的部分界面&#xff0c;还包括锁屏界面&…
阅读更多...
最新文章

Copyright @ 2022~2023