uniapp ios 读写项目里的json文件 uniapp文件操作

uniapp我的示例：如下

点击加号图片：选择上传类型：图片或者文件

上传的图片可以删除

这是界面上的一系列操作，接下来我们来看如何代码实现吧

一、界面代码：展示图片

<view class="title">
				<font class="leftTitle">文件图片</font>
			</view>
			<view class="flex-wrap">
			 //循环显示上传的图片（imgArr这是放上传成功的数组）
							<view class="imgwrap" v-for="(item,index) in imgArr">
					 //放一个删除的标识在图片右上角
							<image src="../../static/into_delete.png" class="iconfont icon-guanbi1" @click="closeImg(index)"></image>
							<image class="img" style="width: 100%;height: 100%;"  :src="getFlieName(item)">
							</image>
							</view>
							// 默认上传的图片
							<image class="img" src="../../static/submit_upload.png" @click="chooseVideoImage" style="width: 120px;height: auto;" mode="widthFix"></image>
						</view>

二、样式代码

.flex-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.imgwrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 18upx;
  margin-bottom: 20upx;

  .iconfont {
    width: 16px;
    height: 16px;
    color: #eee;
    position: absolute;
    top: -20upx;
    right: -20upx;
    z-index: 1;
    cursor: pointer;
  }
}

逻辑代码：点击上传图片，先选择上传类型

// 弹框
    chooseVideoImage() {
      uni.showActionSheet({
        title: "选择上传类型",
        itemList: ['图片', '文件'],
        success: (res) => {
          // console.log(res)
          if (res.tapIndex == 0) {
            this.uploadImg() //图片上传
          } else {
            this.uploadFile() //文件上传
          }
        }
      })
    },

写了一个上传的公共方法(都是调用同一个上传接口) 界面引入：
是图片上传就走图片上传方法、文件上传就走文件上传方法，

import httpTypes from '@/utils/http-types'

/utils/http-types文件内容如下：

import baseurl from './config.js' //公共接口地址 获取请求地址(你自己项目的IP地址)
 
var token   //获取token 我们项目接口需要token验证 所以拿到token
	uni.getStorage({
		key: 'storage_key',
		success: function (res) { 
			token = JSON.parse(res.data).token
		}
	});


// 上传图片封装
function uploadFile(obj) {
	console.log(obj,'obj')// 先看看你传过来的文件格式 然后根据后端需求传哪些参数
	let url = baseurl + '/file/upload?fileName='+obj.filePath.name;  //服务器地址
	// alert(url)
	let filePath = obj.filePath.path;   //要上传文件资源的路径。
	let formData = obj.formData || {'user': 'test'};
	let success = obj.success;
	let name = obj.name || 'filePath';  //文件对应的 key 
	let method = obj.method || 'POST';  //默认post请求
	let fail = obj.fail;
	let complete = obj.complete;
	// console.log(filePath,'filePath')
	// 这里请求后端 
	uni.uploadFile({
		url: url, 
		filePath:filePath,
		name: 'file',
		formData:{'user': 'test','file':filePath},
		header: {
			userAgent: 1,
			Authorization: token
		},
		success: function(res) {
			success(res)
		},
		fail: function(v){
			fail(v)},
		complete: function(v){
			complete(v)},
	})
}
export default {
	request: request,
	uploadFile: uploadFile
};

图片上传方法和文件上传方法、选择类型的时候调用

// 图片上传
    uploadImg() {
      let that = this
      uni.chooseImage({
        count: 9, //上传图片的数量 
        sizeType: ['copressed', 'original'], //原图货压缩图
        sourceType: ['album', 'camera'], //相册或者拍照
        success: function (res) {
          const filename = res.tempFiles[0].name
          const tempFilePaths = res.tempFiles;
          uni.showLoading({
            title: "上传中",
            mask: true
          })
          httpTypes.uploadFile({ //上传服务器
            filePath: tempFilePaths[0],
            success: (res) => {
              let arr = JSON.parse(res.data); //转换格式
              let imgurl = arr.data
              that.imgArr.push(imgurl) //push进数组
              console.log(that.imgArr, 'that.imgArr')
            },
            fail: (res) => {

            },
            complete: (res) => {
              uni.hideLoading()
            }
          });
        }
      });
    },
    // 文件
    uploadFile(e) {
      let that = this
      uni.chooseFile({
        count: 9, //上传的数量
        extension: ['.docx', '.doc', '.ppt', 'xlsx'],
        success: function (res) {
          const filename = res.tempFiles[0].name
          const tempFilePaths = res.tempFiles;
          httpTypes.uploadFile({ //上传服务器
            filePath: tempFilePaths[0],
            success: (res) => {
              let arr = JSON.parse(res.data); //转换格式
              let imgArr = arr.data
              that.imgArr.push(imgArr) //push进数组
            },
          });
        }
      });
    },

上传成功之后 界面显示要判断一下是图片类型还是文件类型，文件类型的话直接显示本地Excel的一个默认图片类型 不需要显示文件，图片类型的话 拿到地址显示

// 判断是否是文件
    getFlieName(fileName) {
      console.log(fileName, 'fileName')
      if (this.isImgFile(fileName)) {
        return this.baseUrl + '/file/download?filePath=' + fileName
      } else {
        return '../../static/excel.png'
      }
    },
    isImgFile(fileName) {
      // console.log(fileName, 'fileName')
      //后缀获取
      let suffix = '';
      // 获取类型结果
      let result = '';
      const flieArr = fileName.split('.');
      suffix = flieArr[flieArr.length - 1];
      if (suffix != "") {
        suffix = suffix.toLocaleLowerCase();
        // 图片格式
        const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
        // 进行图片匹配
        result = imglist.find(item => item === suffix);
        if (result) {
          return true;
        }
      }
      return false;
    },

上传成功之后也可以操作删除，删除这里是直接界面移除

// 删除图片
    closeImg(index) {
      var that = this;
      uni.showModal({
        title: '提示',
        content: '是否删除当前图片',
        success: function (res) {
          if (res.confirm) {
            that.imgArr.splice(index, 1);
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },