uni-app 113上传文件请求封装

简介: uni-app 113上传文件请求封装


chat.vue

<template>
  <view>
    <!-- 导航栏 -->
    <free-nav-bar :title="detail.name" :noreadnum="totalNoreadnum" showBack>
      <free-icon-button slot="right"><text class="iconfont font-md" @click="openChat">&#xe6fd;</text>
      </free-icon-button>
    </free-nav-bar>
    <!-- 聊天内容区域 -->
    <scroll-view scroll-y="true" class="bg-light position-fixed left-0 right-0" style="box-sizing:border-box;bottom:105rpx;"
      :style="chatBodyBottom" :scroll-into-view="scrollIntoView" :show-scrollbar="false"
      :scroll-with-animation="true">
      <!-- 聊天信息列表组件 -->
      <view v-for="(item,index) in list" :key="index" :id="'chatItem_'+index">
        <free-chat-item :item="item" :index="index" ref="chatItem"
          :pretime=" index > 0 ? list[index-1].create_time : 0" @long="long" :shownickname="currentChatItem.shownickname"
          @preview="previewImage" >
        </free-chat-item>
      </view>
    </scroll-view>
    <!-- 扩展菜单 -->
    <free-popup ref="action" bottom transformOrigin="center bottom" @hide="keyBoardHeight = 0" :mask="false">
      <view style="height: 580rpx;" class="border-top border-light-secondary">
        <swiper :indicator-dots="emoticonOrActionList.length>1" style="height:510rpx;">
          <swiper-item class="row" v-for="(item,index) in emoticonOrActionList" :key="index">
            <view class="col-3 flex flex-column align-center justify-center" style="height: 255rpx;"
              v-for="(item2,index2) in item" :key="index2" @click="actionEvent(item2)">
              <image :src="item2.icon" mode="widthFix" style="width: 100rpx;height: 100rpx;"></image>
              <text class="font-sm text-muted mt-2">{{item2.name}}</text>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </free-popup>
    <!-- 弹出层 -->
    <free-popup ref="extend" maskColor bottom :bodyWidth="240" :bodyHeight="geMenusHeight" :tabbarHeight="105">
      <view class="flex flex-column" style="width:240rpx;" :style="getMenusStyle">
        <view v-for="(item,index) in menusList" :key="index" class="flex-1 flex align-center"
          hover-class="bg-light" @click="clickEvent(item.event)">
          <text class="font-md pl-3">{{item.name}}</text>
        </view>
      </view>
    </free-popup>
    <!-- #ifdef APP-PLUS-NVUE -->
    <div class="position-fixed top-0 right-0 left-0 bottom-0" v-if="mode==='action' || mode==='emoticon'"
      @click="clickPage" :style="'bottom:'+maskBottom+'px;'"></div>
    <!-- #endif -->
    <!-- 底部输入框 -->
    <view class="position-fixed left-0 right-0 border-top flex align-center"
      style="background-color: #F7F7F6;height: 105rpx;" :style="'bottom:'+keyBoardHeight+'px;'">
      <free-icon-button @click="changeVoiceOrText">
        <block v-if="mode === 'audio'">
          <text class="iconfont font-lg">&#xe607;</text>
        </block>
        <block v-else>
          <text class="iconfont font-lg">&#xe606;</text>
        </block>
      </free-icon-button>
      <view class="flex-1">
        <view v-if="mode==='audio'" class="rounded flex align-center justify-center" style="height: 80rpx;"
          :class="isRecording?'bg-hover-light':'bg-white'" @touchstart="voiceTouchStart"
          @touchend="voiceTouchEnd" @touchmove="voiceTouchMove" @touchcancel="voiceTouchCancel">
          <text class="font">{{isRecording ? '松开 结束' : '按住 说话'}}</text>
        </view>
        <!-- 底部输入框 -->
        <textarea v-else fixed class="bg-white rounded p-2 font-md" style="height: 50rpx;max-width: 450rpx;"
          :adjust-position="false" v-model="text" @focus="mode = 'text'" />
        <!-- @click="onInputClick" -->
        <!-- <textarea v-else class="bg-white rounded p-1 font-md" style="height: 50rpx;max-width: 500rpx;"
          :adjust-position="false" v-model="text" @focus="mode = 'text'"  /> -->
      </view>
      <template v-if="text.length === 0">
        <!-- 表情 -->
        <free-icon-button><text class="iconfont font-lg"
            @click="openActionOrEmoticon('emoticon')">&#xe605;</text></free-icon-button>
        <!-- 扩展菜单 -->
        <free-icon-button @click="openActionOrEmoticon('action')"><text class="iconfont font-lg">&#xe603;</text>
        </free-icon-button>
      </template>
      <view v-else class="flex-shrink">
        <!-- 发送按钮 -->
        <!-- <view class="main-bg-color rounded flex align-center justify-center mr-2 px-2 pt-4" style="height: 70rpx;" @click="send('text')"> 发送
        </view> -->
        <free-main-button name="发送" @click="send('text')"></free-main-button>
      </view>
    </view>
    <!-- 录音提示 -->
    <view v-if="isRecording" class="position-fixed top-0 left-0 right-0 flex align-center justify-center"
      style="bottom: 105rpx;">
      <view class="rounded flex flex-column align-center justify-center"
        style="width: 360rpx;height: 360rpx;background-color: rgba(0,0,0,0.5);">
        <image src="/static/images/audio/audio/recording.gif" style="width: 150rpx;height: 150rpx;"></image>
        <text class="font text-white mt-3">{{unRecord?'松开手指,取消发送':'手指上滑,取消发送'}}</text>
      </view>
    </view>
  </view>
</template>
<script>
  // #ifdef APP-NVUE
  const domModule = weex.requireModule('dom');
  // #endif
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeIconButton from '@/components/free-ui/free-icon-button.vue';
  import freeChatItem from '@/components/free-ui/free-chat-item.vue';
  import freePopup from '@/components/free-ui/free-popup.vue';
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  import {
    mapState,
    mapMutations
  } from 'vuex';
  import auth from '@/common/mixin/auth.js';
  import $U from '@/common/free-lib/util.js';
  import $H from '@/common/free-lib/request.js';
  export default {
    mixins: [auth],
    components: {
      freeNavBar,
      freeIconButton,
      freeChatItem,
      freePopup,
      freeMainButton
    },
    watch: {
      mode(newValue, oldValue) {
        if (newValue !== 'action' && newValue !== 'emoticon') {
          this.$refs.action.hide();
        }
        if (newValue !== 'text') {
          uni.hideKeyboard()
        }
      }
    },
    // 生命周期
    mounted() {
      this.statusBarHeight = 0;
      // 获取任务栏高度
      // #ifdef APP-PLUS-NVUE
      this.statusBarHeight = plus.navigator.getStatusbarHeight()
      // #endif
      this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
      // 监听键盘高度变化
      uni.onKeyboardHeightChange((res) => {
        if (this.mode !== 'action' && this.mode !== 'emoticon') {
          this.keyBoardHeight = res.height;
        }
        if (this.keyBoardHeight > 0) {
          this.pageToBottom()
        }
      })
      // 注册发送音频事件
      this.regSendVoiceEvent((url) => {
        if (!this.unRecord) {
          // 发送
          this.send('audio', url, {
            time: this.RecordTime
          })
        }
      });
    },
    onLoad(e) {
      if (!e.params) {
        return this.backToast();
      }
      // 初始化
      this.__init();
      this.detail = JSON.parse(e.params)
      // 创建聊天对象
      this.chat.createChatObject(this.detail)
      // 获取历史记录
      this.list = this.chat.getChatdetail()
      // 监听接收聊天信息
      uni.$on('onMessage', (message) => {
        if ((message.from_id === this.detail.id && message.chat_type === 'user') || (message.chat_type ===
            'group' && this.detail.id)) {
          this.list.push(message);
          // 置于顶部
          this.pageToBottom();
        }
      })
      // uni.$on('updateHistory', this.updateHistory)
      // this.pageToBottom()
      uni.$on('clearHistory',()=>{
        this.list = [];
      })
    },
    destroyed() {
      // 销毁聊天对象
      this.chat.destoryChatObject();
      // 销毁监听接收聊天消息
      uni.$off('onMessage', () => {})
      uni.$off('clearHistory', () => {})
    },
    computed: {
      ...mapState({
        chatList:state=>state.user.chatList,
        RECORD: state => state.audio.RECORD,
        RecordTime: state => state.audio.RecordTime,
        chat: state => state.user.chat,
        totalNoreadnum: state => state.user.totalNoreadnum
      }),
      // 当前会话配置信息
      currentChatItem(){
        let index = this.chatList.findIndex(item=>item.id === this.detail.id && item.chat_type === this.detail.chat_type);
        if(index !== -1){
          return this.chatList[index]
        }
        return {};
      },
      // 所有信息的图片地址
      imageList() {
        var arr = [];
        this.list.forEach((item) => {
          if (item.type === 'emoticon' || item.type === 'image') {
            arr.push(item.data)
          }
        })
        return arr;
      },
      // 获取蒙版的位置
      maskBottom() {
        return this.keyBoardHeight + uni.upx2px(105)
      },
      // 动态获取菜单高度
      geMenusHeight() {
        let H = 100;
        return this.menus.length * H;
      },
      // 获取菜单的样式
      getMenusStyle() {
        return `height:${this.geMenusHeight}rpx;`;
      },
      // 是否是本人
      isdoSelf() {
        // 获取本人id(假设拿到了)
        let id = 1
        let user_id = this.propIndex > -1 ? this.list[this.propIndex].user_id : 0
        return user_id === id
      },
      // 获取操作菜单
      menusList() {
        return this.menus.filter(v => {
          if (v.name === '撤回' && this.isDoSelf) {
            return false;
          } else {
            return true;
          }
        })
      },
      // 聊天区域bottom
      chatBodyBottom() {
        return `bottom:${uni.upx2px(105) + this.keyBoardHeight}px;top:${this.navBarHeight}px`;
      },
      // 获取操作或者表情列表
      emoticonOrActionList() {
        if (this.mode === 'emoticon' || this.mode === 'action') {
          return this[this.mode + 'List'];
        } else {
          return [];
        }
      }
    },
    data() {
      return {
        // 模式 text输入文字 emoticon表情 action操作 audio音频
        mode: 'text',
        scrollIntoView: "",
        // 扩展菜单列表
        actionList: [
          [{
              name: "相册",
              icon: "/static/images/extends/pic.png",
              event: "uploadImage"
            },
            {
              name: "拍摄",
              icon: "/static/images/extends/video.png",
              event: "uploadVideo"
            },
            {
              name: "收藏",
              icon: "/static/images/extends/shoucan.png",
              event: ""
            },
            {
              name: "名片",
              icon: "/static/images/extends/man.png",
              event: ""
            },
            {
              name: "语音通话",
              icon: "/static/images/extends/phone.png",
              event: ""
            },
            {
              name: "位置",
              icon: "/static/images/extends/path.png",
              event: ""
            }
          ]
        ],
        // 表情包
        emoticonList: [
          [{
              name: "沮丧",
              icon: "/static/images/emoticon/5497/0.gif",
              event: ""
            },
            {
              name: "沮丧",
              icon: "/static/images/emoticon/5497/0.gif",
              event: ""
            }
          ]
        ],
        // 输入文字
        text: "",
        // 音频录制中
        isRecording: false,
        // 取消录音
        unRecord: false,
        // 当前气泡索引
        keyBoardHeight: 0,
        propIndex: 1,
        navBarHeight: 0,
        list: [],
        RecordingStartY: 0,
        detail: {
          id: 0,
          name: '',
          avatar: '',
          chat_type: 'user'
        },
        menus: [{
            name: '复制',
            event: ""
          },
          {
            name: '发送给朋友',
            event: ""
          },
          {
            name: '收藏',
            event: ""
          },
          {
            name: '删除',
            event: ""
          },
          {
            name: '多选',
            event: ""
          },
          {
            name: '撤回',
            event: "removeChatItem"
          }
        ],
      }
    },
    methods: {
      ...mapMutations(['regSendVoiceEvent']),
      __init() {
        var total = 24;
        var page = Math.ceil(total / 8);
        var arr = [];
        for (var i = 0; i < page; i++) {
          var start = i * 8;
          arr[i] = [];
          for (var j = 0; j <= 8; j++) {
            arr[i].push({
              name: '表情' + (start + j),
              icon: '/static/images/emoticon/5497/' + (start + j) + '.gif',
              event: 'sendEmoticon'
            })
          }
        }
        this.emoticonList = arr;
      },
      // 点击区域
      clickPage() {
        // 隐藏操作菜单
        this.$refs.action.hide();
        this.mode = 'text';
      },
      // 事件分发
      actionEvent(e) {
        switch (e.event) {
          case 'uploadImage':
            uni.chooseImage({
              count: 9, //默认9
              success: (res) => {
                res.tempFilePaths.forEach((item) => {
                  // 发送到服务器
                  // 渲染到页面
                  this.send('image', item);
                })
              }
            });
            break;
          case 'sendEmoticon': // 发送表情包
            this.send('emoticon', e.icon);
            break;
          case 'uploadVideo': // 发送短视频
            uni.chooseVideo({
              maxDuration: 10,
              success: (res) => {
                // 渲染页面
                this.send('video', res.tempFilePath);
                // 发送到服务端(获取视频封面,返回url)
                // 修改本地发送状态
              }
            })
            break;
        }
      },
      // 打开扩展菜单或者表情包
      openActionOrEmoticon(model = 'action') {
        this.mode = model;
        this.$refs.action.show();
        uni.hideKeyboard();
        this.keyBoardHeight = uni.upx2px(580);
      },
      // 发送
      send(type, data = '', options = {}) {
        $H.upload('/upload',{
          filePath:data
        },(progress)=>{
          console.log('上传进度',progress);
        }).then(url=>{
          console.log(url)
        }).catch(err=>{
          console.log(err)
        })
        // 组织数据格式
        switch (type) {
          case 'text':
            data = data || this.text
            break;
        }
        let message = this.chat.formatSendData({
          type,
          data,
          options
        })
        // 渲染到页面
        console.log('this.list:', this.list)
        let index = this.list.length
        this.list.push(message)
        // 监听上传进度
        let onProgress = false
        if (message.type !== 'text' && message.type !== 'emoticon' && message.type !== 'card' && !message.data
          .startsWith('http')) {
          onProgress = (progress) => {
            console.log('上传进度:', progress);
          }
        }
        // 发送到服务端
        this.chat.send(message, onProgress).then(res => {
          console.log(res);
          // 发送成功
          this.list[index].id = res.id
          this.list[index].sendStatus = 'success'
        }).catch(err => {
          // 发送失败
          this.list[index].sendStatus = 'fail'
          console.log(err);
        })
        // 发送文字成功,清空输入框
        if (type === 'text') {
          this.text = ''
        }
        // 置于底部
        this.pageToBottom()
      },
      // 长按消息气泡
      long(e) {
        this.propIndex = e.index;
        this.$refs.extend.show(e.x, e.y);
      },
      // 回到底部
      pageToBottom() {
        // #ifdef APP-PLUS-NVUE
        let chatItem = this.$refs.chatItem
        let lastIndex = chatItem.length > 0 ? chatItem.length - 1 : 0
        if (chatItem[lastIndex]) {
          dom.scrollToElement(chatItem[lastIndex], {})
        }
        // #endif
        // #ifndef APP-NVUE
        setTimeout(() => {
          let lastIndex = this.list.length - 1
          this.scrollIntoView = 'chatItem_' + lastIndex
        }, 300)
        // #endif
      },
      // 操作菜单方法分发
      clickEvent(event) {
        switch (event) {
          case 'removeChatItem': // 撤回消息
            // 拿到当前被操作的信息
            this.list[this.propIndex].isremove = true;
            break;
          default:
            break;
        }
        // 关闭菜单
        this.$refs.extend.hide();
      },
      // 预览图片
      previewImage(url) {
        // 预览图片
        uni.previewImage({
          current: url,
          urls: this.imageList,
          indicator: "default",
          longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
              console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
            },
            fail: function(err) {
              console.log(err.errMsg);
            }
          }
        });
      },
      // 切换音频录制喝文本输入
      changeVoiceOrText() {
        this.mode = this.mode !== 'audio' ? 'audio' : 'text';
      },
      // 录音相关 
      // 录音开始
      voiceTouchStart(e) {
        this.isRecording = true;
        this.RecordingStartY = e.changedTouches[0].screenY;
        this.unRecord = false;
        // 开始录音
        this.RECORD.start({
          format: 'mp3'
        })
      },
      // 录音结束
      voiceTouchEnd() {
        this.isRecording = false;
        // 停止录音
        this.RECORD.stop();
      },
      // 录音打断
      voiceTouchCancel() {
        this.isRecording = false;
        this.unRecord = true;
        // 停止录音
        this.RECORD.stop();
      },
      voiceTouchMove(e) {
        var Y = Math.abs(e.changedTouches[0].screenY - this.RecordingStartY);
        this.unRecord = (Y >= 80);
      },
      // 打开聊天信息
      openChat() {
        uni.navigateTo({
          url: '/pages/chat/chat-set/chat-set?params=' + JSON.stringify({
            id: this.detail.id,
            chat_type: this.detail.chat_type
          }),
        });
      }
    }
  }
</script>
<style>
</style>

request.js

// request.js
import $C from './config.js';
import $U from './util.js';
export default {
    // 全局配置
    common:{
        baseUrl:$C.baseUrl,
        header:{
            'Content-Type':'application/json;charset=UTF-8',
        },
        data:{},
        method:'GET',
        dataType:'json',
        token:true
    },
    // 请求 返回promise
    request(options = {}){
        // 组织参数
        options.url = this.common.baseUrl + options.url
        options.header = options.header || this.common.header
        options.data = options.data || this.common.data
        options.method = options.method || this.common.method
        options.dataType = options.dataType || this.common.dataType
        options.token = options.token === false ?  false : this.common.token
        // 请求之前验证...
        // token验证
        if (options.token) {
            let token = $U.getStorage('token')
            // 二次验证
            if (!token) {
                uni.showToast({ title: '请先登录', icon: 'none' });
                // token不存在时跳转
                return uni.reLaunch({
                    url: '/pages/common/login/login.vue',
                });
            }
            // 往header头中添加token
            options.header.token = token
        }
        // 请求
        return new Promise((res,rej)=>{
            // 请求中...
            uni.request({
                ...options,
                success: (result) => {
                    // 返回原始数据
                    if(options.native){
                        return res(result)
                    }
                    // 服务端失败
                    if(result.statusCode !== 200){
                        if (options.toast !== false) {
                            uni.showToast({
                                title: result.data.data || '服务端失败',
                                icon: 'none'
                            });
                        }
                        return rej(result.data) 
                    }
                    // 其他验证...
                    // 成功
                    let data = result.data.data
                    res(data)
                },
                fail: (error) => {
                    uni.showToast({ title: error.errMsg || '请求失败', icon: 'none' });
                    return rej(error)
                }
            });
        })
    },
    // get请求
    get(url,data = {},options = {}){
        options.url = url
        options.data = data
        options.method = 'GET'
        return this.request(options)
    },
    // post请求
    post(url,data = {},options = {}){
        options.url = url
        options.data = data
        options.method = 'POST'
        return this.request(options)
    },
    // delete请求
    del(url,data = {},options = {}){
        options.url = url
        options.data = data
        options.method = 'DELETE'
        return this.request(options)
    },
  // 上传文件
  upload(url,data,onProgress = false){
    return new Promise((result,reject)=>{
      // 上传
      let token = $U.getStorage('token');
      // 二次验证
      if(!token){
        uni.showToast({
          title:'请先登录',
          icon:'none'
        });
        // token不存在时跳转
        return uni.reLaunch({
          url:'/pages/common/login/login'
        });
      }
      const uploadTask = uni.uploadFile({
        url:this.common.baseUrl + url,
        filePath:data.filePath,
        name:data.name || 'file',
        header:{token},
        success:(res)=>{
          if(res.statusCode !== 200){
            return uni.showToast({
              title:'上传失败',
              icon:'none'
            });
          }
          let message = JSON.parse(res.data);
          result(message.data);
        },
        fail: (err) => {
          reject(err);
        }
      })
      uploadTask.onProgressUpdate((res)=>{
        console.log('上传进度'+res.progress);
        if(typeof onProgress === 'function'){
          onProgress(res.progress)
        }
      });
    })
  }
}

感谢大家观看,我们下次见

目录
相关文章
|
3月前
|
存储 BI Android开发
全开源仿第八区H5APP封装打包分发系统源码
全开源仿第八区H5APP封装打包分发系统源码
135 4
|
3月前
|
Go 开发者
【应用服务 App Service】App Service发生错误请求时,如何查看IIS Freb日志,从中得知错误所发生的模块,请求中所携带的Header信息
【应用服务 App Service】App Service发生错误请求时,如何查看IIS Freb日志,从中得知错误所发生的模块,请求中所携带的Header信息
|
3月前
|
网络协议 安全 前端开发
【应用服务 App Service】Azure 应用服务测试网络访问其他域名及请求超时限制(4分钟 ≈ 230秒)
【应用服务 App Service】Azure 应用服务测试网络访问其他域名及请求超时限制(4分钟 ≈ 230秒)
|
3月前
|
API C#
【Azure App Service】验证App Service接受HTTP 2.0请求
【Azure App Service】验证App Service接受HTTP 2.0请求
|
3月前
|
API 持续交付 数据安全/隐私保护
【Azure ACR+App Service】ACR WebHook请求App Service时遇见 401 Unauthorized
【Azure ACR+App Service】ACR WebHook请求App Service时遇见 401 Unauthorized
|
3月前
|
应用服务中间件 Linux 网络安全
【Azure 应用服务】PHP应用部署在App Service for Linux环境中,上传文件大于1MB时,遇见了413 Request Entity Too Large 错误的解决方法
【Azure 应用服务】PHP应用部署在App Service for Linux环境中,上传文件大于1MB时,遇见了413 Request Entity Too Large 错误的解决方法
|
3月前
|
Linux PHP
【Azure 应用服务】PHP项目部署到App Service for Linux环境中,如何修改上传文件大小的限制呢?
【Azure 应用服务】PHP项目部署到App Service for Linux环境中,如何修改上传文件大小的限制呢?
|
3月前
|
API 网络架构 开发者
【Azure 应用服务】App Service多个部署槽(Slot)之间,设置Traffic百分比后,如何来判断请求是由那一个槽(Slot)来进行处理呢?
【Azure 应用服务】App Service多个部署槽(Slot)之间,设置Traffic百分比后,如何来判断请求是由那一个槽(Slot)来进行处理呢?
|
3月前
【Azure 应用服务】记一次 App Service 部分请求一直返回 401 "No Authority" 的情况
【Azure 应用服务】记一次 App Service 部分请求一直返回 401 "No Authority" 的情况
|
3月前
|
Java
【Azure 应用服务】使用PowerShell脚本上传文件至App Service目录  
【Azure 应用服务】使用PowerShell脚本上传文件至App Service目录  

热门文章

最新文章