UniApp图片上传

<template>
  <view class="content">
    <!-- <image class="logo" src="/static/logo.png"></image> -->
    <view class="text-area">
      <text class="title">{{title}}</text>

    </view>
    <view class="text-area">
      <text class="title">{{te}}</text>
    </view>
    <view class="text-area">
      <text class="title">{{file}}</text>
    </view>
    <view class="text-area">
      <text class="title">{{PostFileUrl}}</text>
    </view>
    <view>
      <button type="primary" @click="img">上传图片按钮</button>
    </view>
   
  </view>
</template>

<script>
  let IsMobile = false;
  export default {
    data() {
      return {
        PostFileUrl: "http://192.168.1.1:801/UploadingTools/upload_ajax.ashx?action=SingleFile",
        title: '葫芦娃队',
        te: '文件路径',
        file: '’'
      }
    },
    onLoad() {

    },
    methods: {
      img() {
        let the = this;
        //检查是否是手机
        the.EnvironmentCheck();
        //从本地相册选择图片或使用相机拍照。
        uni.chooseImage({
          count: 1, //允许上传的照片数量,最多可以选择的图片张数，默认9
          sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
          sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
          success(res) {
            //成功则返回图片的本地文件路径列表 tempFilePaths
            console.log("选择图片成功success");
            console.log(res);
            console.log(JSON.stringify(res.tempFilePaths));
            the.te = res.tempFilePaths;
            //获取文件file 
            the.FileUploading(res);
            // uni.previewImage({
            //  // 对选中的图片进行预览
            //  urls: res.tempFilePaths,
            //  // urls:['','']  图片的地址 是数组形式
            // })
          },
          fail(res) {
            //接口调用失败的回调函数
            console.log("选择图片失败fail");
            console.log(res);
          },
          complete(res) {
            //接口调用结束的回调函数（调用成功、失败都会执行）
            console.log("选择图片接口调用结束complete");
            console.log(res);
          }
        });
      },
      FileUploading(fileData) {
        console.log("文件上传");
        let the = this;
        console.log(fileData);
        let tempFilePaths = fileData.tempFilePaths[0];
        let tempFiles = fileData.tempFiles[0];
        console.log(tempFilePaths);
        console.log(tempFiles);

        let name = tempFiles.name!=undefined?tempFiles.name:the.FindFilesName(tempFilePaths);
        console.log("图片名称："+name);
        //重构提交路径
        console.log("重构提交路径");
        the.PostFileUrl += "&name=" + name;
        console.log(the.PostFileUrl);


        //上传图片 
        uni.uploadFile({
          url: the.PostFileUrl, //仅为示例，非真实的接口地址
          filePath: tempFilePaths, 
          name: 'file',
          formData: {
            'fileName': name
          },
          success: (uploadFileRes) => {
            console.log("上传图片:接口调用成功的回调函数********");
            console.log(uploadFileRes);
          },
          fail: function(res) {
            //  接口调用失败的回调函数
            console.log("上传图片:接口调用失败的回调函数");
            console.log(res)
          },
          complete: function(res) {
            //接口调用结束的回调函数（调用成功、失败都会执行）
            console.log("上传图片:接口调用结束的回调函数（调用成功、失败都会执行）");
            console.log(res)
          }
        });

      },
      FindFilesName(path) {
        //遍历-文件名称
         
        let filename;
        if (path.indexOf("/") > 0) //如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
        {
          filename = path.substring(path.lastIndexOf("/") + 1, path.length);
        } else {
          filename = path;
        } 
        return filename;
      },
      EnvironmentCheck() { 
        //环境检查
        switch (uni.getSystemInfoSync().platform) {
          case 'android':

            console.log('运行Android上')
            IsMobile = true;
            break;

          case 'ios':

            console.log('运行iOS上')
            IsMobile = true;
            break;

          default:

            console.log('运行在开发者工具上')

            break;

        } 
      }
    }
  }

 
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>

注意项

​​uni.uploadFile(OBJECT)​​

​​https://uniapp.dcloud.io/api/request/network-file​​

OBJECT 参数说明

一定要注意这个：