视频上传到七牛云

weapp/src/config.js

@@ -9,10 +9,10 @@ const baseConfig = {
 
 const development = {
   // baseUrl: 'http://221.230.55.29:31919',
-  baseUrl: 'https://c5a6-117-90-37-10.ap.ngrok.io',
+  baseUrl: 'https://d763-117-90-37-10.ap.ngrok.io',
   // webUrl: 'https://smartwater.anxinyun.cn',
   // pcode: 'fce4afe2-5b6a-408a-ab18-a2afa7fa027c',
-  imgUrl: 'http://test.resources.anxinyun.cn/',
+  imgUrl: 'http://rfkimpwbb.hn-bkt.clouddn.com/',
   // requestCache: true,    //开启异步请求缓存
   ...baseConfig
 };

weapp/src/packages/patrol/index.jsx

@@ -4,10 +4,14 @@ import { View, RadioGroup, Radio, Image, Input, Picker } from '@tarojs/component
 import { AtButton, AtTextarea, AtImagePicker } from 'taro-ui';
 import InputPicker from '../components/inputPicker';
 import request from '@/services/request';
-import { postReport, getReportDetail, delReport, getRoadSection } from '@/services/api';
+import environment from '../../config';
+import { getState } from '../../store/globalState';
+import { postReport, getReportDetail, delReport, getRoadSection, postImage } from '@/services/api';
 import './index.scss';
 import arrowIcon from '../../static/img/patrol/arrow-down.svg';
 
+const { baseUrl, imgUrl } = environment;
+
 const Index = () => {
   const userInfo = Taro.getStorageSync('userInfo') || {};
   const isSuperAdmin = userInfo && userInfo.username === 'SuperAdmin' ? true : false
@@ -30,15 +34,20 @@ const Index = () => {
   const [longitude, setLongitude] = useState(0) // 经度
   const [latitude, setLatitude] = useState(0) // 纬度
 
+  const [sceneImg, setSceneImg] = useState([]) // 现场图片七牛云url
+  const [conserveBeforeImg, setConserveBeforeImg] = useState([]) // 养护前图片
+  const [conserveUnderwayImg, setConserveUnderwayImg] = useState([]) // 养护中图片
+  const [conserveAfterImg, setConserveAfterImg] = useState([]) // 养护后图片
+
   const [sourceRoadSel, setSourceRoadSel] = useState([])
   const [sourceRoadStartSel, setSourceRoadStartSel] = useState([])
   const [sourceRoadEndSel, setSourceRoadEndSel] = useState([])
 
   const prjType = [
-    { text: '道路', value: 'road'},
+    { text: '道路', value: 'road' },
-    { text: '桥梁', value: 'bridge'},
+    { text: '桥梁', value: 'bridge' },
-    { text: '涵洞', value: 'culvert'},
+    { text: '涵洞', value: 'culvert' },
-    { text: '其他', value: 'other'},
+    { text: '其他', value: 'other' },
   ]
   const prjTypeSelector = ['道路', '桥梁', '涵洞', '其他']
   const [roadStartSel, setRoadStartSel] = useState([])
@@ -80,10 +89,10 @@ const Index = () => {
           setRoadSectionEnd(data.roadSectionEnd)
           setAddress(data.address)
           setContent(data.content)
-          setScenePic(data.scenePic ? data.scenePic.map(item => ({ url: item })) : [])
+          setScenePic(data.scenePic ? data.scenePic.map(item => ({ url: imgUrl + item })) : [])
-          setConserveBeforePic(data.conserveBeforePic ? data.conserveBeforePic.map(item => ({ url: item })) : [])
+          setConserveBeforePic(data.conserveBeforePic ? data.conserveBeforePic.map(item => ({ url: imgUrl + item })) : [])
-          setConserveUnderwayPic(data.conserveUnderwayPic ? data.conserveUnderwayPic.map(item => ({ url: item })) : [])
+          setConserveUnderwayPic(data.conserveUnderwayPic ? data.conserveUnderwayPic.map(item => ({ url: imgUrl + item })) : [])
-          setConserveAfterPic(data.conserveAfterPic ? data.conserveAfterPic.map(item => ({ url: item })) : [])
+          setConserveAfterPic(data.conserveAfterPic ? data.conserveAfterPic.map(item => ({ url: imgUrl + item })) : [])
         } else {
           Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
         }
@@ -176,11 +185,11 @@ const Index = () => {
       latitude
     }
     if (reportType === 'patrol') {
-      data['scenePic'] = scenePic.length > 0 ? scenePic.map(item => item.url) : null
+      data['scenePic'] = sceneImg
     } else {
-      data['conserveBeforePic'] = conserveBeforePic.length > 0 ? conserveBeforePic.map(item => item.url) : null
+      data['conserveBeforePic'] = conserveBeforeImg
-      data['conserveUnderwayPic'] = conserveUnderwayPic.length > 0 ? conserveUnderwayPic.map(item => item.url) : null
+      data['conserveUnderwayPic'] = conserveUnderwayImg
-      data['conserveAfterPic'] = conserveAfterPic.length > 0 ? conserveAfterPic.map(item => item.url) : null
+      data['conserveAfterPic'] = conserveAfterImg
     }
 
     Taro.showModal({
@@ -272,24 +281,97 @@ const Index = () => {
     setReportType(e.detail.value)
   }
 
-  function handleImgChange(files, type) {
+  function handleImgChange(files, operationType, index, type) {
-    switch (type) {
+    if (operationType === 'remove') {
-      case 'scenePic':
+      setImg(false)
-        setScenePic(files)
+    }
-        break;
+    function setImg(isAdd, url) {
-      case 'conserveBeforePic':
+      switch (type) {
-        setConserveBeforePic(files)
+        case 'scenePic':
-        break;
+          let nextImg = sceneImg
-      case 'conserveUnderwayPic':
+          if (isAdd) {
-        setConserveUnderwayPic(files)
+            nextImg.push(url)
-        break;
+          } else {
-      case 'conserveAfterPic':
+            nextImg.splice(index, 1)
-        setConserveAfterPic(files)
+          }
-        break;
+          setSceneImg(nextImg)
-      default:
+          setScenePic(files)
-        break;
+          break;
+        case 'conserveBeforePic':
+          let nextConserveBeforeImg = conserveBeforeImg
+          if (isAdd) {
+            nextConserveBeforeImg.push(url)
+          } else {
+            nextConserveBeforeImg.splice(index, 1)
+          }
+          setConserveBeforeImg(nextConserveBeforeImg)
+          setConserveBeforePic(files)
+          break;
+        case 'conserveUnderwayPic':
+          let nextConserveUnderwayImg = conserveUnderwayImg
+          if (isAdd) {
+            nextConserveUnderwayImg.push(url)
+          } else {
+            nextConserveUnderwayImg.splice(index, 1)
+          }
+          setConserveUnderwayImg(nextConserveUnderwayImg)
+          setConserveUnderwayPic(files)
+          break;
+        case 'conserveAfterPic':
+          let nextConserveAfterImg = conserveAfterImg
+          if (isAdd) {
+            nextConserveAfterImg.push(url)
+          } else {
+            nextConserveAfterImg.splice(index, 1)
+          }
+          setConserveAfterImg(nextConserveAfterImg)
+          setConserveAfterPic(files)
+          break;
+        default:
+          break;
+      }
+    }
+    if (operationType === 'add' && files.length > 0) {
+      Taro.showLoading({ title: '上传中' })
+      let i = 0
+      switch (type) {
+        case 'scenePic':
+          i = scenePic.length
+          break;
+        case 'conserveBeforePic':
+          i = conserveBeforePic.length
+          break;
+        case 'conserveUnderwayPic':
+          i = conserveUnderwayPic.length
+          break;
+        case 'conserveAfterPic':
+          i = conserveAfterPic.length
+          break;
+        default:
+          break;
+      }
+      for (i; i < files.length; i++) {
+        const tempFilePaths = files[i].url
+        let token = getState('token') || Taro.getStorageSync('token')
+        Taro.uploadFile({
+          url: `${baseUrl}${postImage()}?token=${token}`,
+          filePath: tempFilePaths,
+          name: 'file',
+          success: (res) => {
+            if (i === files.length) {
+              Taro.hideLoading();
+            }
+            if (res.statusCode == 200) {
+              setImg(true, JSON.parse(res.data).key)
+            } else {
+              Taro.showToast({ title: '上传失败，请重试', icon: 'error' })
+            }
+          }
+        });
+      }
     }
   }
+
   function handleImgClick(index, file) {
     Taro.previewImage({
       urls: [file.url] // 需要预览的图片http链接列表
@@ -397,7 +479,7 @@ const Index = () => {
 
       <AtTextarea
         title='巡查内容：'
-        placeholder={isView ? '' : '请输入巡查内容'}
+        placeholder={isView ? '' : '请输入具体内容'}
         value={content}
         onChange={(v, e) => handleInput(e, 'content')}
         disabled={isView}
@@ -419,7 +501,7 @@ const Index = () => {
                   count={3 - scenePic.length}
                   showAddBtn={scenePic.length >= 3 ? false : true}
                   files={scenePic}
-                  onChange={files => handleImgChange(files, 'scenePic')}
+                  onChange={(files, operationType, index) => handleImgChange(files, operationType, index, 'scenePic')}
                   onImageClick={handleImgClick}
                 />
             }
@@ -442,7 +524,7 @@ const Index = () => {
                   count={3 - conserveBeforePic.length}
                   showAddBtn={conserveBeforePic.length >= 3 ? false : true}
                   files={conserveBeforePic}
-                  onChange={files => handleImgChange(files, 'conserveBeforePic')}
+                  onChange={(files, operationType, index) => handleImgChange(files, operationType, index, 'conserveBeforePic')}
                   onImageClick={handleImgClick}
                 />
             }
@@ -462,7 +544,7 @@ const Index = () => {
                   count={3 - conserveUnderwayPic.length}
                   showAddBtn={conserveUnderwayPic.length >= 3 ? false : true}
                   files={conserveUnderwayPic}
-                  onChange={files => handleImgChange(files, 'conserveUnderwayPic')}
+                  onChange={(files, operationType, index) => handleImgChange(files, operationType, index, 'conserveUnderwayPic')}
                   onImageClick={handleImgClick}
                 />
             }
@@ -483,7 +565,7 @@ const Index = () => {
                   count={3 - conserveAfterPic.length}
                   showAddBtn={conserveAfterPic.length >= 3 ? false : true}
                   files={conserveAfterPic}
-                  onChange={files => handleImgChange(files, 'conserveAfterPic')}
+                  onChange={(files, operationType, index) => handleImgChange(files, operationType, index, 'conserveAfterPic')}
                   onImageClick={handleImgClick}
                 />
             }

weapp/src/services/api.js

@@ -37,6 +37,11 @@ export const getRoadSection = () => {
   return `/road/section`;
 };
 
+// 上传图片
+export const postImage = () => {
+  return `/attachments/report`;
+};
+
 //行业查询
 export const getIndustryUrl = () => {
   return `/elec/business/industry`