uniapp圖片上傳詳解

一、uniapp圖片上傳組件

uniapp的上傳組件可以通過選擇圖片或拍照進行圖片上傳，支持多種上傳方式。使用上傳組件可以快速實現上傳功能，方便簡單。

具體使用方法：

{ /* html */ }

  
    
  

二、uniapp上傳多張圖片

在使用uniapp圖片上傳時，我們在實際的項目中通常需要上傳多張圖片。這時需要用到循環語句進行多圖上傳

具體使用方法：

{ /* html */ }

  
    上傳圖片
    
      
    
  



export default {
  data() {
    return {
      imgList: []
    }
  },
  methods: {
    chooseImg() {
      uni.chooseImage({
        count: 9,
        success: (res) => {
          this.imgList = res.tempFilePaths
        }
      })
    }
  }
}

三、uniapp圖片上傳壓縮

上傳大圖片會浪費用戶的流量和時間，同時由於圖片過大會增加服務器的處理時間。所以需要對圖片進行壓縮優化。

uniapp提供了圖片壓縮插件uni-image，將圖片壓縮後再進行上傳，這樣可以減少上傳時間、流量和服務器的壓力。

具體使用方法：

{ /* html */ }

  
    
  



import uniImage from '@dcloudio/uni-image';

export default {
  methods: {
    async handleFileUpload(file) {
      const compressedFile = await uniImage.compressImage({
        src: file.path,
        quality:50
      });
      //將壓縮後的圖片上傳
      console.log(compressedFile.tempFilePath);
    }
  }
};

四、uniapp圖片上傳進度顯示在圖片上

在圖片上傳過程中，為了展現更好的用戶體驗，可以在圖片上顯示上傳進度。

uniapp提供了上傳組件，需要通過文件上傳事件onFileUploadProgress進行操作，獲取上傳進度，然後將進度顯示在圖片上

具體使用方法：

{ /* html */ }

  
    
  



export default {
  data() {
    return {
      uploadProgress: 0,
    };
  },
  methods: {
    handleFileUploadProgress(progressEvent) {
      this.uploadProgress = parseInt((progressEvent.loaded / progressEvent.total) * 100);
    },
    async handleFileUpload(file) {
      //上傳邏輯
    },
  },
};

五、uniapp圖片上傳功能

在uniapp中，我們可以通過獲取圖片路徑和上傳接口，實現圖片上傳功能。

具體實現方法：

{ /* html */ }

  
    
  



export default {
  methods: {
    handleFileUpload(file) {
      //獲取圖片路徑
      let filePath = file.path;
      uni.uploadFile({
        url: 'http://yourserver.com/upload.php',
        filePath: filePath,
        name: 'file',
        header: {
          'content-type': 'multipart/form-data'
        },
        formData: {
          'user': 'test'
        },
        success: function(res) {
          console.log(res.data);
        }
      });
    }
  }
};

六、uniapp圖片上傳 web-h5移動端

uniapp圖片上傳支持h5和移動端。上傳圖片需要使用觸發文件選擇器來選擇需要上傳的圖片，並將其轉換為base64編碼後上傳至服務器端。

具體實現方法：

{ /* html */ }

  
    
  



export default {
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadend = () => {
        const base64data = reader.result.split(',')[1];
        uni.request({
          url: '/upload',
          method: 'POST',
          dataType: 'json',
          data: {
            file: base64data
          }
        }).then((res) => {
          console.log(res.data);
        });
      };
    },
  },
};

七、uniapp圖片上傳攜參數

有時候需要在上傳圖片時攜帶一個或多個參數，uniapp也提供了上傳參數的方法。

具體實現方法：

{ /* html */ }

  
    
  



export default {
  methods: {
    handleFileUpload(file) {
      const { path } = file;
      const token = 'xxxx';
      uni.uploadFile({
        url: 'http://xxxx/upload',
        filePath: path,
        name: 'file',
        formData: {
          token,
        },
        success(response) {
          console.log(response);
        },
        fail(error) {
          console.log(error);
        },
      });
    },
  },
};

八、uniapp圖片上傳服務器

在實際項目中，圖片上傳一般是需要傳到服務器。uniapp的圖片上傳，需要後台給出支持上傳的接口，再通過上傳的文件數據，利用AJAX等方式與後台建立連接，進行文件上傳到服務器。

所以我們需要在後台建立支持圖片上傳的接口。

node.js代碼：

{ /* javascript */ }
app.post('/upload', function(req, res) {
  var form = new formidable.IncomingForm();
  form.parse(req, function(err, fields, files) {
    var oldPath = files.file.path;
    console.log('old path: ' + oldPath);
    var suffix = /\.[^\.]+/.exec(files.file.name);
    var newPath = path.join(__dirname, '/uploads/' + Date.now() + suffix);
    console.log('new path: ' + newPath);
    fs.rename(oldPath, newPath, function(err) {
      if (err) {
        console.log(err);
        res.sendStatus(500);
      } else {
        console.log('upload success!');
        res.sendStatus(200);
      }
    });
  });
});

九、uniapp圖片上傳不顯示

在uniapp中，圖片上傳後如果不顯示，我們需要檢查是否是地址錯誤，是否有特別的訪問權限等問題。

解決方法：

{ /* javascript */ }
//設置服務器的訪問地址為完整地址
//http://www.yourDomain.com/yourPath/image.png
//或者使用相對地址
//./yourPath/image.png
//或者使用uniapp提供的path屬性

十、uniapp圖片上傳到騰訊雲

騰訊雲提供了雲存儲COS對象存儲，可以用於存儲大規模非結構化數據，如文檔、圖片、音視頻等。

具體實現流程：

1. 登錄騰訊雲，進入「對象存儲」中的控制台，創建桶；
2. 在桶內創建臨時密鑰，用於客戶端獲取臨時證書；
3. 客戶端如Android、iOS、H5調用 COS API，使用權限鑒定後上傳文件。

Android、iOS、H5等平台使用騰訊雲對象存儲 COS對象存儲 即可實現文件上傳和下載的操作。

在uniapp中，可以通過利用uniapp的插件來實現圖片上傳到騰訊雲的操作。

插件地址：https://ext.dcloud.net.cn/plugin?id=2701

具體使用方法：

{ /* html */ }

  
    
  



import cosSdk from '@/components/cos-js-sdk-v5';
const COS = cosSdk({
  SecretId: 'yourSecretId',
  SecretKey: 'yourSecretKey',
});

const config = {
  appId: 'yourAppId',
  bucket: 'yourBucketName',
};

export default {
  methods: {
    handleFileUpload(file) {
      const { path } = file;
      const name = `${Date.now()}-${file.name}`;
      const filePath = `image/${name}`; // 具體的路徑結構可以自由定義

      COS.putObject({
        ...config,
        Key: filePath,
        StorageClass: 'STANDARD',
        Body: path,
        onProgress: (percent) => {
          console.log(`上傳進度：${percent * 100}%`);
        },
      }, (err, data) => {
        if (err) {
          console.log(err);
          return;
        }
        
        // 上傳成功
        console.log(data);
      });
    },
  },
};