微信小程序上传照片主要代码

原创 已于 2025-05-16 15:03:34 修改 · 197 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序

于 2025-05-15 16:56:08 首次发布

wxml部分

<!--sub_tool/article/edit/edit.wxml-->

<custom-page>
  <nav-bar slot="nav" title="修改文章" show-back="{{true}}" background-color="#fff">
  </nav-bar>

  <view slot="content">
    <van-notify id="van-notify" />
    <view class="container">
      <!-- 行业门类 -->
      <view class="info">
        <view class="name">行业门类（必选）</view>
        <van-dropdown-menu active-color="#1989fa" duration="{{50}}" overlay="{{true}}">
          <van-dropdown-item value="{{ catalogId }}" options="{{ catalogs }}" bind:change="changeCatalog" />
        </van-dropdown-menu>
      </view>
      <!-- 行业大类 -->
      <view class="info">
        <view class="name">行业大类（必选）</view>
        <van-dropdown-menu active-color="#1989fa" duration="{{50}}" overlay="{{true}}">
          <van-dropdown-item value="{{ subcatalogId }}" options="{{ subcatalogs }}" 
          bind:change="changeSubcatalog" />
        </van-dropdown-menu>
      </view>
      <!-- 标题 -->
      <view class="info">
        <view class="name">标题（必填）</view>
        <view class="content">
          <textarea bindinput="bindTitleInput" value="{{title}}" auto-height placeholder="请输入标题" />
        </view>
      </view>
      <!-- 内容 -->
      <view class="info">
        <view class="name">内容（必填），要显示图片处请输入@img</view>
        <view class="content">
          <textarea bindinput="bindSummaryInput" maxlength="-1" value="{{content}}" auto-height placeholder="请输入内容" />
        </view>
      </view>
      <!-- 图片集 -->
      <view class="info">
        <view class="name">图片集（至少3张）</view>
        <view class="buttons" bindtap="choosePhoto">
          <button type="default">添加图片</button>
        </view>
        <view class="list">
          <view wx:for="{{photos}}" wx:key="*this" class="item">
            <view class="pic">
              <view class="pic_tool">
                <view class="pic_tool_del" data-id="{{item.articlePhotoId}}" bindtap="handleDeletePhoto">
                  <mp-icon icon="close" color="#666" size="{{25}}"></mp-icon>
                </view>
              </view>
              <image src="{{item.fullUrl}}" />
            </view>
            <view class="desc">
              <view class="title">{{item.title}}</view>
              <view class="desc_edit_btn" data-id="{{item.articlePhotoId}}" data-title="{{item.title}}" bindtap="handleEditPhoto">
                <mp-icon icon="pencil" color="#666" size="{{22}}"></mp-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 保存/丢弃 -->
      <view class="buttons">
        <button type="primary" bindtap="handleSubmit">保存</button>
        <button type="warn" bindtap="handleDelete">删除</button>
      </view>
      <view class="placeholder">.</view>
    </view>
  </view>
</custom-page>

json部分

{
  "usingComponents": {
    "nav-bar": "/components/nav/nav",
    "custom-page": "/components/page/page",
    "mp-icon": "weui-miniprogram/icon/icon",
    "van-notify": "@vant/weapp/notify/index",
    "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
    "van-dropdown-item": "@vant/weapp/dropdown-item/index"
  }
}

wxss部分

/* sub_tool/article/edit/edit.wxss */

page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #eee;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info {
  width: 720rpx;
  margin-top: 25rpx;
  display: flex;
  flex-direction: column;
  color: #888;
  background-color: #fff;
  border-radius: 20rpx;
}
.info .name {
  margin: 0 auto;
  width: calc(100% - 25rpx);
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
}
.info .content {
  display: flex;
  margin: 0 auto;
  width: calc(100% - 25rpx);
  padding-bottom: 30rpx;
  font-size: 36rpx;
  color: #333;
}

.info .content .logo {
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  border-radius: 10rpx;
  background-color: #aaa;
  overflow: hidden;
}

.info .content .left {
  width: calc(100% - 60rpx);
  line-height: 50rpx;
}
.info .content .right {
  width: 60rpx;
  text-align: center;
}

input {
  width: 100%;
  height: 60rpx;
  border-radius: 10rpx;
  padding: 16rpx;
  background-color: #f1f1f1;
}

textarea {
  width: 100%;
  min-height: 200rpx;
  border-radius: 10rpx;
  padding: 6rpx;
  background-color: #f1f1f1;
}

.buttons {
  margin: 0 auto;
}
.buttons button {
  width: 700rpx;
  margin: 25rpx 0rpx;
}

.buttons-max {
  width: 680rpx;
  height: 200rpx;
  margin-top: 25rpx;
}

.info .list {
  margin: 0 auto;
  width: 700rpx;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 15rpx;
}

.info .list .item {
  width: 350rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* height: 150rpx; */
}

.info .list .item .pic_tool {
  position: relative;
  top: 0rpx;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}
.info .list .item .pic_tool_del {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info .list .item .pic{
  width: 330rpx;
  height: 248rpx;
  background-color: #ddd;
  overflow: hidden;
}
.info .list .item .pic image{
  width: 100%;
  height: 100%;
}
.info .list .item .desc{
  width: 330rpx;
  height: 80rpx;
  background-color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.info .list .item .desc .title {
  width: 270rpx;
  font-size: 30rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.info .list .item .desc_edit_btn {
  width: 50rpx;
  height: 44rpx;
  display: flex;
  justify-content: center;
}

.placeholder {
  width: 750rpx;
  height: 40rpx;
  color: #eee;
}

.inputPlaceholder {
  font-size: 30rpx;
}

/* 定制下拉列表组件的样式 */
.custom-class {
  width: 500rpx;
}
.custom-class .van-dropdown-menu__item {
  display: flex;
  justify-content: flex-start !important;
}
.custom-class .van-dropdown-menu__item .title-class {
  font-size: 32rpx !important;
  color: #333;
}

.item-custom-class {
  width: 720rpx;
  margin: 0 auto;
}
.item-title-class {
  font-size: 32rpx !important;
}

.no-company {
  margin-left: 10rpx;
  font-size: 32rpx;
  line-height: 80rpx;
  color: rgb(136, 136, 136);
}

js部分

// sub_tool/article/edit/edit.js

import api from '@/api/api.js'
import config from '@/config/index.js'
import storesToken from '@/stores/token.js'
import storesConfig from '@/stores/config.js'
import Notify from '@vant/weapp/notify/notify'
import { getFullUrl } from '@/config/setting'

const { API_BASE_URL } = config.get()

// 上传的路径
const UPLOAD_PATH = '/weixin/api/article_photo/upload/photo'
const PHOTO_ID_NAME = 'articlePhotoId'

Page({
  data: {
    articleId: '',
    title: '',
    content: '',
    photos: [],
    catalogs: [
      {
        text: '请选择门类',
        value: '-1',
      }
    ],
    catalogId: '-1',
    subcatalogs: [
      {
        text: '暂无大类',
        value: '-1',
      }
    ],
    subcatalogId: '-1',
  },

  enableAlert() {
    wx.enableAlertBeforeUnload({
      message: '放弃编写信息吗？',
    })
  },

  disableAlert() {
    wx.disableAlertBeforeUnload()
  },

  hasContent() {
    const { title, content, photos } = this.data
    return (title.trim() || content.trim() || photos.length)
  },

  setAlertState() {
    if(this.hasContent()) {
      this.enableAlert()
    }
    else {
      this.disableAlert()
    }
  },

  async getArticle(articleId) {
    const result = await api.getById('article', articleId)
    const { code, data } = result
    if(code == 200) {
      const { catalogId, subcatalogId, title, content, photoIds, photoDataJson } = data
      const photos = photoIds.map(photoId => {
        const item = photoDataJson[photoId]
        item.fullUrl = getFullUrl(item.minDir)
        return item
      })
      this.setData({
        articleId,
        catalogId,
        subcatalogId,
        title,
        content,
        photos,
      })
      this.getCatalogs()
      this.getSubcatalogs(catalogId, subcatalogId)
    }
  },

  // 获取门类
  async getCatalogs() {
    api.list('article_catalog', {
      level: 1,
      pageNum: 1,
      pageSize: 100,
    }).then(response => {
      const { rows } = response
      const catalogs = rows.map(item => {
        return {text: item.catalogName, value: item.catalogId}
      })
      this.setData({
        catalogs: [{text:'请选择门类', value:'-1'}, ...catalogs],
      })
    }).catch(e => {
      console.log('@@ e -> ', e)
    })
  },

  // 根据门类ID获取门类
  async getSubcatalogs(catalogId, subcatalogId) {
    const result = await api.list('article_catalog', {
      parentId: catalogId,
      pageNum: 1,
      pageSize: 100,
    })
    const { rows } = result
    const subcatalogs = rows.map(item => {
      return {
        text: item.catalogName,
        value: item.catalogId,
      }
    })
    this.setData({
      catalogId,
      subcatalogId: subcatalogId || '-1',
      subcatalogs: [{text:'请选择大类', value: '-1'}, ...subcatalogs]
    })
  },

  // 选择行业门类
  async changeCatalog(e) {
    const catalogId = e.detail
    // 选择默认提示项，大类显示“暂无大类”
    if(catalogId == '-1') {
      this.setData({
        catalogId: '-1',
        subcatalogId: '-1',
        subcatalogs: [
          {
            text: '暂无大类',
            value: '-1',
          }
        ],
      })
      return
    }
    // 选择内容项
    await this.getSubcatalogs(catalogId)
  },

  // 选择行业大类
  changeSubcatalog(e) {
    const subcatalogId = e.detail
    this.setData({
      subcatalogId,
    })
  },

  bindTitleInput(e) {
    this.setData({
      title: e.detail.value
    })
    this.setAlertState()
  },

  bindSummaryInput(e) {
    this.setData({
      content: e.detail.value
    })
    this.setAlertState()
  },
  
  // 选择图片集
  choosePhoto() {
    const _this = this
    const { photos } = this.data
    this.chooseImage(photos, (images) => {
      _this.setData({
        photos: images,
      })
    })
  },

  // 选择相册
  chooseImage(images, callback) {
    const _this = this
    wx.chooseMedia({
      count: 5, // 最多可以选择的图片张数
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      camera: 'back',
      success: async (res) => {
        // 返回选定照片的本地文件路径列表
        const tempFiles = res.tempFiles
        // 循环上传图片
        for(const { tempFilePath } of tempFiles) {
          const list = await this.uploadFile(tempFilePath)
          for(const item of list) {
            if(!images.find(p => p[PHOTO_ID_NAME] == item[PHOTO_ID_NAME])) {
              item.fullUrl = getFullUrl(item.minDir)
              images.push(item)
            }
          }
          _this.setAlertState()
          callback(images)
        }
      },
      fail(res) {
      }
    })
  },
  
  async uploadFile(filePath) {
    wx.showLoading({
      title: '正在上传...'
    })
    return new Promise((resolve, reject) => {
      wx.uploadFile({
        url: API_BASE_URL + UPLOAD_PATH, // 上传的服务器地址
        filePath: filePath,
        name: 'file', // 文件对应的 key
        header: {
          'Authorization': `Bearer ${storesToken.get()}`
        },
        formData: {
          // HTTP 请求中其他额外的 form data
        },
        success: (res) => {
          // 上传成功后的处理
          console.log(res.data)
          if(res.statusCode == 200) {
            const result = JSON.parse(res.data)
            if(result.code == 200) {
              const list = result.data
              resolve(list)
            }
          }
          wx.hideLoading()
        },
        fail: (err) => {
          // 上传失败后的处理
          console.error(err)
          reject(err)
          wx.hideLoading()
        }
      })
    })
  },

  handleDeletePhoto(e) {
    const { id } = e.currentTarget.dataset
    const _this = this
    wx.showModal({
      title: '提示',
      content: '要删除图片吗？',
      success: async (res) => {
        if (res.confirm) { //点击了确认
          const photos = _this.data.photos.filter(item => item[PHOTO_ID_NAME] != id)
          _this.setData({
            photos,
          })
          _this.setAlertState()
        } else {
          console.log('用户点击了取消')
        }
      }
    })
  },

  async handleEditPhoto(e) {
    const _this = this
    const { id, title } = e.currentTarget.dataset
    this.handleEditImage(title, async(content) => {
      const photos = _this.data.photos
      const photo = photos.find(item => item[PHOTO_ID_NAME] == id)
      const result = await api.update('article_photo', {
        [PHOTO_ID_NAME]: photo[PHOTO_ID_NAME],
        title: content
      })
      photo.title = content
      _this.setData({
        photos,
      })
    })
  },

  handleEditImage(content, callback) {
    wx.showModal({
      title: '修改图片描述',
      editable: true,//显示输入框
      content, // photo.originalFilename,
      placeholderText: '输入图片描述',//显示输入框提示信息
      success: async (res) => {
        if (res.confirm) { //点击了确认
          console.log(res.content)//用户输入的值
          const content = (res.content || '').trim()
          if(content) {
            callback(content)
          }
        } else {
          console.log('用户点击了取消')
        }
      }
    })
  },

  // 保存商品基本信息
  async handleSubmit() {
    const _this = this
    const { articleId, catalogId, subcatalogId, title, content, photos } = this.data
    if(catalogId == '-1' || subcatalogId == '-1') {
      Notify({ 
        type: 'danger',
        message: '请选择行业门类和大类',
        top: getApp().globalData.navTopHeight,
      })
      return
    }
    if(!title.trim()) {
      Notify({ 
        type: 'danger',
        message: '标题不能为空',
        top: getApp().globalData.navTopHeight,
      })
      return
    }
    if(!content.trim()) {
      Notify({ 
        type: 'danger',
        message: '内容不能为空',
        top: getApp().globalData.navTopHeight,
      })
      return
    }
    if(photos.length < 3) {
      Notify({ 
        type: 'danger',
        message: '上传照片至少3张',
        top: getApp().globalData.navTopHeight,
      })
      return
    }

    this.disableAlert()
    let photoIds = []
    if(photos.length) {
      photoIds = photos.map(item => item[PHOTO_ID_NAME])
    }
    const data = {
      articleId,
      catalogId,
      subcatalogId,
      title, 
      content, 
      photoIds,
    }
    console.log('@@ handleSubmit data -> ', data)
    api.update('article', data)
    .then(res => {
      wx.navigateBack()
    })
    .catch(res => {
      Notify({
        type: 'danger', 
        message: res.msg || '发生错误',
        top: getApp().globalData.navTopHeight,
      })
    })
  },

  // 删除文章
  handleDelete() {
    const { articleId } = this.data
    wx.showModal({
      title: '提示',
      content: '确认删除本篇文章吗？',
      complete: async (res) => {
        if (res.cancel) {
          
        }
        if (res.confirm) {
          const result = await api.remove('article', [articleId])
          if(result.code == 200) {
            wx.navigateBack()
          }
          else {
            Notify({ 
              type: 'danger', 
              message: '删除失败',
              top: getApp().globalData.navTopHeight,
            })
            return
          }
        }
      }
    })
  },

  onLoad(options) {
    const { articleId } = options
    this.getArticle(articleId)
  },

  onShow() {
    // 设置顶部title
    wx.setNavigationBarTitle({
      title: '发布展文',
    })
  },

})

微信小程序-图片上传
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-23 7394
微信小程序有原生的API接口，来进行图片的选取、上传 wx.chooseImage(Object object) | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.htmlUploadTask | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/w
微信小程序实现图片上传
aaa123aaasqw的博客
05-15 3756
代码里对代码的备注已经很明确了，大家仔细扒一下，根据的自己的项目进行相应的调整，基本上都是没问题的，~~不要直接直接粘贴不复置，我是直接在我的项目中直接拿过来的代码，直接粘贴复制肯定是不行的！好啦这些就是我小程序上传图片的操作，这些只是我对日常工作的积累，不喜勿喷 不喜勿喷 不喜勿喷 重要的事情说三遍，大家仔细看下代码理解用法，还是很简单的，看都不看想白漂肯定是不行的呦～～～～～～～～～最近做了个小程序，涉及到了图片上传的功能，今天给大家详细介绍下如何实现小程序图片上传，话不多说先上代码。
微信小程序上传图片写法
jianwei的博客
04-13 2406
小程序如何上传图片
微信小程序上传图片的三种方法
GDNLQ的博客
03-29 2561
【代码】微信小程序上传图片的三种方法。
微信小程序多图片上传实用代码记录
红烧栗子黄瓜鱼的博客
08-07 2509
微信小程序多图片上传，返回值异步问题以及解决
微信小程序中身份证信息识别源代码
05-21
微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小...
微信小程序上传图片并等比列压缩到指定大小的实例代码
10-16
总结来说，微信小程序上传图片并等比压缩到指定大小的实例代码向我们展示了如何利用微信小程序提供的API，结合原生canvas的API，来实现图片的等比压缩。这对于需要在微信小程序中处理图片资源的开发者来说，具有相当...
微信小程序Demo-简单工具封装-附完整源代码.rar
03-20
微信小程序Demo-简单工具封装-附完整源代码.rar 资源介绍 本资源是一个简单实用的微信小程序Demo，致力于帮助开发者快速掌握微信小程序的基本功能和开发技巧。该Demo包含了多种常用功能的封装，如网络请求、数据...
菜谱微信小程序源码云开发菜谱微信小程序源码.rar
09-18
菜谱微信小程序源码云开发菜谱微信小程序源码 京细菜谱是一个美食分享网站,提供优质的家常菜谱大全，仿京细菜谱小程序源码为喜欢美食的朋友提供了很多的美食烹饪教程，让您轻松学会做美食。对不同食材和地域的饮食做...
微信小程序-微信转盘抽奖活动代码
06-01
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要...以上是关于“微信小程序-微信转盘抽奖活动代码”的主要技术知识点。通过理解并掌握这些内容，开发者可以构建出一个完整且具有吸引力的抽奖活动小程序。
微信小程序上传图片到服务器实例代码
08-28
主要介绍了微信小程序上传图片到服务器的实例代码，在文章给大家补充介绍了微信小程序上传一或多张图片的方法，本文给大家介绍的非常详细，具有参考借鉴加载,需要的朋友可以参考下
微信小程序上传图片代码：最新可用(后端代码+前端代码)
03-02 4606
微信小程序上传图片代码：最新可用(后端代码+前端代码)
微信小程序上传图片
最新发布
cynthia_1994的博客
08-27 864
2.图片转base64。
微信小程序实现上传图片的功能
coldriversnow的专栏
08-16 5655
这篇文章主要为大家详细介绍了微信小程序实现上传图片的功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
【微信小程序+PHP】上传图片
qq_25285531的博客
12-20 953
一、wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择上传图</button> </view> <image src='{{source}}' style='width:600rpx; height:600rpx' /> 二、...
微信小程序实现图片上传（清晰版）
qq_42044542的博客
03-20 1万+
【代码】微信小程序实现图片上传（清晰版）
微信小程序图片上传（开发实例）
热门推荐
前端_李嘉豪
07-25 3万+
图片上传服务器： wxml <view class="container"> <button bindtap='chooseImageTap'>上传图片</button> </view> wxss Page({ /** * 页面的初始数据 */ data: { imgs: [],//本地图片地址...
微信小程序开发：实现图片上传功能
吃不胖.
10-07 3438
该API接收一个对象作为参数，并返回一个 Promise，根据用户的选择结果来确定 Promise 的状态，成功则返回选定照片的本地文件路径列表，失败则返回错误信息。调用 wx.previewImage() 实现图片预览功能，该API接收一个对象作为参数，并返回一个 Promise，根据用户的选择结果来确定 Promise 的状态，成功则返回选择结果，失败则返回错误信息。本文通过调用微信小程序的API，详细介绍了微信小程序的图片上传功能的实现过程，包括图片选择、预览、上传、进度条等。
微信小程序实现图片拖拽上传的完整代码包
在微信小程序中实现图片上传和拖动功能，涉及到微信小程序开发的核心技术，包括JavaScript（js）、微信标记语言（wxml）、微信样式表（wxss）等多个方面。本文将详细解析如何使用这些技术实现一个图片选择和拖动的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值