請求地址 `/api/v1_upload.php`
* 需要權限
* 如果不是在uniapp中調用`this.upload(path,{}).then(res=>{})`,請自行添加headers信息
添加headers
~~~
this.headers = { Authorization: this.get_sign() };
~~~
未登錄時，可設置登錄.如果登錄功能做了，可以直接先登錄。忽略此處。
~~~
uni.setStorageSync('user_id', 2);
~~~
請求正確返回
~~~
{
"code": 0,
"id": "3",
"name": "1.jpg",
"url": "/uploads/127_0_0_1_3000/2022-03-06/622408f1c55e7.jpg",
"data": "http://127.0.0.1:3000/uploads/127_0_0_1_3000/2022-03-06/622408f1c55e7.jpg",
}
~~~
對于uniapp需要的，通常情況是 `data`字段。data是完整的文件遠程地址。
以下是上傳演示完整代碼 ：
~~~
<template>
<view >
<view class="page">
<cl-toast ref="toast"></cl-toast>
<cl-upload-crop :headers="headers" v-if="upload_url" :before-upload="onBeforeUpload" v-model="url" multiple :limit="10" :action="upload_url"></cl-upload-crop>
<view class="flex-wrap flex-between">
<view v-if="url" v-for="v in url" class="mb10">
<image :src="v" mode="aspectFill" style="width:330rpx;height: 450rpx;"></image>
<button @click="crop(v)">裁剪</button>
</view>
</view>
</view>
<ksp-cropper mode="free" :width="200" :height="140" :maxWidth="1024" :maxHeight="1024" :url="crop_url" @cancel="crop_cancel" @ok="crop_success"></ksp-cropper>
</view>
</template>
<script>
var _this;
export default {
data() {
return {
width: 200,
height: 200,
crop_url: '',
url: '',
upload_url: '',
headers: {}
};
},
onLoad() {
uni.setStorageSync('user_id', 2);
_this = this;
console.log('load');
this.upload_url = this.config.upload_url;
this.headers = { Authorization: this.get_sign() };
},
methods: {
crop_success(e) {
this.crop_url = '';
this.upload(e.path).then(res => {
if (res.code == 0) {
}
});
},
crop_cancel() {
this.crop_url = '';
},
crop(v) {
uni.downloadFile({
url: v,
success(res) {
_this.crop_url = res.tempFilePath;
}
});
},
onBeforeUpload(file, index) {
if (file.size > 51200 * 1024) {
this.$refs['toast'].open('圖片大小不能大于50M');
return false;
}
}
}
};
</script>
~~~
