程序访问控制

- part1 无需权限

图片上传

1、使用Picker读取媒体库的图片与视频 （返回一个临时的图片地址 咱们可以直接预览 也可以继续向后走 拿到服务器地址再预览）

2、把图片拷贝到应用的缓存目录 （不支持直接通过相册本地路径上传，仅支持通过缓存目录上传 context.cacheDir）

3、上传文件

0. 选择图片：调用 selectImage 方法打开图片选择器。
1. 上传图片：调用 uploadImage 方法将选择的图片上传到服务器。

import { fetch } from '@system.fetch';  
import { image } from '@system.image';  
import { storage } from '@system.storage';  

export default {  
    data: {  
        selectedImage: '',  
        serverUrl: '你的服务器地址/api/upload'  
    },  
    
    selectImage() {  
        // 选择图片  
        image.pick({  
            count: 1,  
            success: (data) => {  
                this.selectedImage = data[0].uri;  
            },  
            fail: (err) => {  
                console.error('选择图片失败:', err);  
            }  
        });  
    },  

    uploadImage() {  
        if (!this.selectedImage) {  
            console.error('请先选择一张图片');  
            return;  
        }  
        
        // 使用 FormData 创建表单数据  
        const formData = new FormData();  
        formData.append('file', this.selectedImage); // 将图片 URI 添加到 FormData  

        // 发送 POST 请求  
        fetch(this.serverUrl, {  
            method: 'POST',  
            body: formData  
        })  
        .then((response) => {  
            if (response.status === 200) {  
                return response.json();  
            } else {  
                throw new Error('上传失败');  
            }  
        })  
        .then((data) => {  
            console.log('上传成功:', data);  
        })  
        .catch((error) => {  
            console.error('错误:', error);  
        });  
    }  
}

拍照上传

0. 拍照功能：

   • 调用 takePhoto 方法，用户会被提示打开摄像头进行拍照。
   • 拍摄成功后，得到的图片 URI 会保存到 photoUri 变量中。

1. 上传功能：

   • 调用 uploadPhoto 方法，检查是否已成功拍照。如果有有效的 photoUri，则创建 FormData 对象并发送 POST 请求将照片上传到服务器

import { camera } from '@system.camera';  
import { fetch } from '@system.fetch';  

export default {  
    data: {  
        photoUri: '',  
        serverUrl: '你的服务器地址/api/upload' // 请替换为你的服务器地址  
    },  

    takePhoto() {  
        // 调用摄像头拍照  
        camera.takePhoto({  
            quality: 80, // 图像质量参数  
            success: (data) => {  
                this.photoUri = data.uri; // 获取拍照后图片的 URI  
                console.log('拍照成功:', this.photoUri);  
            },  
            fail: (err) => {  
                console.error('拍照失败:', err);  
            }  
        });  
    },  

    uploadPhoto() {  
        if (!this.photoUri) {  
            console.error('请先拍摄一张照片');  
            return;  
        }  

        // 创建 FormData 对象  
        const formData = new FormData();  
        formData.append('file', {  
            uri: this.photoUri,  
            type: 'image/jpeg', // 根据需求设置文件类型  
            name: 'photo.jpg' // 根据需求设置文件名  
        });  

        // 发送 POST 请求上传图片  
        fetch(this.serverUrl, {  
            method: 'POST',  
            body: formData  
        })  
        .then((response) => {  
            if (response.status === 200) {  
                return response.json();  
            } else {  
                throw new Error('上传失败');  
            }  
        })  
        .then((data) => {  
            console.log('上传成功:', data);  
        })  
        .catch((error) => {  
            console.error('错误:', error);  
        });  
    }  
}

文件上传

0. 文件选择：

   • 调用 chooseFile 方法打开文件选择器，用户选择完文件后，文件的信息会被保存在 selectedFiles 数组中。

1. 文件上传：

   • 调用 uploadFiles 方法检查是否选择了文件。如果选择了有效的文件，则创建 FormData 对象并将文件添加到其中，然后发送 POST 请求上传文件。

import { file } from '@system.file';  
import { fetch } from '@system.fetch';  

export default {  
   data: {  
       selectedFiles: [], // 保存已经选择的文件  
       serverUrl: '你的服务器地址/api/upload' // 请替换为你的服务器地址  
   },  

   chooseFile() {  
       // 选择文件  
       file.chooseFile({  
           success: (data) => {  
               this.selectedFiles = data.files; // 保存选择的文件  
               console.log('选择的文件:', this.selectedFiles);  
           },  
           fail: (err) => {  
               console.error('选择文件失败:', err);  
           }  
       });  
   },  

   uploadFiles() {  
       if (this.selectedFiles.length === 0) {  
           console.error('请先选择文件');  
           return;  
       }  

       // 创建 FormData 对象  
       const formData = new FormData();  

       // 将每个文件添加到 FormData  
       this.selectedFiles.forEach((file) => {  
           formData.append('files[]', {  
               uri: file.uri,  
               type: file.type || 'application/octet-stream', // 文件类型  
               name: file.name // 文件名  
           });  
       });  

       // 发送 POST 请求上传文件  
       fetch(this.serverUrl, {  
           method: 'POST',  
           body: formData  
       })  
       .then((response) => {  
           if (response.status === 200) {  
               return response.json();  
           } else {  
               throw new Error('上传失败');  
           }  
       })  
       .then((data) => {  
           console.log('上传成功:', data);  
       })  
       .catch((error) => {  
           console.error('错误:', error);  
       });  
   }  
}