uni-app 图片上传

直饮水 發表於 2021-2-7 18:36:00

<h2>uni.uploadFile(OBJECT)</h2>
将本地资源上传到开发者服务器，客户端发起一个POST请求，其中content-type为multipart/form-data.
如页面通过uni.chooseImage等接口获得一个本地资源的临时危机路径后，可通过此接口将本地资源上传到指定服务器。
OBJECT 参数说明：
<table style="height: 438px; width: 824px" border="0">
<tbody>
<tr>
<td style="text-align: center">参数名</td>
<td style="text-align: center">类型</td>
<td style="text-align: center">必填</td>
<td style="text-align: center">说明</td>
<td style="text-align: center">平台支持</td>
</tr>
<tr>
<td>url</td>
<td>String</td>
<td>是</td>
<td>开发者服务器url</td>
<td> </td>
</tr>
<tr>
<td>files</td>
<td>Aarry</td>
<td>否</td>
<td>需要上传的文件列表。使用files时，filePath和name不生效。</td>
<td>5+app</td>
</tr>
<tr>
<td>filePath</td>
<td>String</td>
<td>是</td>
<td>要上传文件资源的路径</td>
<td> </td>
</tr>
<tr>
<td>name</td>
<td>String</td>
<td>是</td>
<td>文件对应得key，开发者在服务器端通过这个key可以获取到文件二进制内容。</td>
<td> </td>
</tr>
<tr>
<td>header</td>
<td>Object</td>
<td>否</td>
<td>HTTP请求 Header，header中不能设置Referer。</td>
<td> </td>
</tr>
<tr>
<td>formData</td>
<td>Object</td>
<td>否</td>
<td>HTTP请求中其他额外的form data</td>
<td> </td>
</tr>
<tr>
<td>success</td>
<td>Function</td>
<td>否</td>
<td>接口调用成功的回调函数</td>
<td> </td>
</tr>
<tr>
<td>fail</td>
<td>Function</td>
<td>否</td>
<td>接口调用失败的回调函数</td>
<td> </td>
</tr>
<tr>
<td>complete</td>
<td>Function</td>
<td>否</td>
<td>接口回调结束的回调函数（调用成功、失败都会执行）</td>
<td> </td>
</tr>
</tbody>
</table>
 
图片上传及进度条显示
<div class="cnblogs_code">
<pre><template>
<View>
 {{name}}---{{age}}
 
 <progress :percent="percent" stroke-width="10"></progress>
 <button @click="img">选择照片</button>
</View>
</template>

<script>
var _self;
export default {
 data(){
 return{
 percent:0,
 age:'',
 name:''
 }
 },
 onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
 console.log(option.age); //打印出上个页面传递的参数。
 console.log(option.name); //打印出上个页面传递的参数。
 this.age=option.age;
 this.name=option.name;
 _self=this;
 },
 methods:{
 img:function(){
 uni.chooseImage({
 count: 1,
 sizeType:"compressed",
 success: (res) => {
 console.log(res);
 // 浏览
 // uni.previewImage({
 // urls: res.tempFilePaths
 // })
 var imgsFile=res.tempFilePaths;
 var uper=uni.uploadFile({
 url: 'https://demo.hcoder.net/index.php?c=uperTest',
 filePath: imgsFile,
 name: 'file',
 success:function(res1){
 console.log(res1);
 }
 });
 //修改进度条
 uper.onProgressUpdate(function(e){
 _self.percent=e.progress;
 console.log('上传进度'+e.progress);
 console.log('已上传数据长度'+e.totalBytesSent);
 console.log('数据总长度'+e.totalBytesExpectedToSend);
 });
 }
 })
 }
 }
}
</script>

<style>

</style></pre>
</div>
<h2>uni.downloadFile(OBJECT)</h2>
下载文件资源到本地，客户端直接发起一个HTTP GET请求，返回文件的本地临时路径。
OBJECT 参数说明：
<table style="height: 236px; width: 937px" border="0">
<tbody>
<tr>
<td style="text-align: center">参数名</td>
<td style="text-align: center">类型</td>
<td style="text-align: center">必填</td>
<td style="text-align: center">说明</td>
</tr>
<tr>
<td>url</td>
<td>String</td>
<td>是</td>
<td>下载资源的url</td>
</tr>
<tr>
<td>header</td>
<td>Object</td>
<td>否</td>
<td>HTTP请求Header，header中不能设置Referer</td>
</tr>
<tr>
<td>success</td>
<td>Function</td>
<td>否</td>
<td>下载成功后以tempFilePath的形式给页面，res={tempFilePath:'文件的临时路径'}</td>
</tr>
<tr>
<td>fail</td>
<td>Function</td>
<td>否</td>
<td>接口调用失败的回调函数</td>
</tr>
<tr>
<td>complete</td>
<td>Function</td>
<td>否</td>
<td>接口调用结束的回调函数（调用成功、失败都会执行）</td>
</tr>
</tbody>
</table>
<div class="cnblogs_code">
<pre> const downloadTask=uni.downloadFile({
 url: 'http://www.example.com/file/test',//下载地址
 success:function(res){
 if(res.statusCode===200){
 console.log('下载成功');
 }
 }
 });
 // 下载监听
 downloadTask.onProgressUpdate(function(res){
 console.log('下载进度'+res.progress);
 console.log('已经下载数据长度'+res.totalBytesWritten);
 console.log('数据总长度'+res.totalBytesExpectedToWrite);


 })</pre>
</div>
  
来源：https://www.cnblogs.com/ckfuture/p/14386324.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 图片上传