uniapp小计 h5图片请求403

uniapp请求图片403

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="referrer" content="never" />
    <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>

<body>
    <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->



</body>

</html>

manif中h5 配置index.html路径

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用规范:  var file = $("#file_input")[0].files[0]; if(file.size / 1024 > 1024 * 5){ mui.toast('图片不能超过5M'); return; } //图片压缩 compress.rotatePhotoCompress(file,function(imageObj){ var formData = new FormData(); formData.append("uploadFile", imageObj, file.name); // 文件对象 //图片上传 uploadAdd(formData); }); /** * 图片上传 * @param formData */ function uploadAdd(formData){ var URL = apiUrl.addMultImageURL+"?plateTag=order&fileOwnerId=order&fileType=image&token;="+app.getToken(); $.ajax({ url: URL, //请求地址 type: "post", async: true, //默认为异步 data: formData, //参数 contentType: false, //数据请求格式 processData:false, xhr:function(){ myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ // check if upload property exists myXhr.upload.addEventListener('progress',function(e){ //显示进度条 $("#progress1").show(); var loaded = e.loaded;//已经上传大小情况 var tot = e.total;//附件总大小 var per = Math.floor(100*loaded/tot); //已经上传的百分比 mui("#progress1").progressbar({progress:per}).show(); }, false); // for handling the progress of the upload } return myXhr; },// 成功 success: function (data) { //隐藏进度条 $("#progress1").hide(); if (data.error == 0 && null != data.url) { mui.toast('上传图片成功'); $('.show_img').append("<div class='imgList'><span class='oClose'>X</span><img src="+app.fileUrl+data.url+"><input type='hidden' name='imgUrls["+count+"]' value="+data.url.replace(app.fileUrl,"")+"></div>"); count++; } else { mui.toast('上传图片失败'); $('#uploadPicButton').html('请你选择图片重新上传'); } }, error:function(rep) { $("#progress1").hide(); console.log(JSON.stringify(rep)); mui.toast('上传异常'); } }) }
Uniapp是一个跨平台的应用开发框架,可以同时开发出安卓、iOS和H5等多个平台的应用。在Uniapp中,我们可以使用一些插件来实现H5手机上传图片和视频的功能。 对于图片上传,可以使用uni.uploadFile方法,通过选择图片后,将其以formData的形式上传到后端服务器。代码示例如下: ``` uni.chooseImage({ success: function (res) { uni.uploadFile({ url: 'http://example.com/upload', filePath: res.tempFilePaths[0], name: 'file', success: function (res) { console.log('图片上传成功'); }, fail: function (err) { console.error('图片上传失败', err); } }); } }); ``` 而对于视频上传,可以使用uni.chooseVideo方法选择要上传的视频文件,然后使用uni.uploadFile方法将其上传到后端服务器。代码示例如下: ``` uni.chooseVideo({ success: function (res) { uni.uploadFile({ url: 'http://example.com/upload', filePath: res.tempFilePath, name: 'file', success: function (res) { console.log('视频上传成功'); }, fail: function (err) { console.error('视频上传失败', err); } }); } }); ``` 需要注意的是,上传文件需要后端服务器的支持,我们需要提前配置好后端接口来处理文件上传的请求。另外,在使用上传功能之前,需要先在uni-app的manifest.json配置文件中,将H5平台的origin字段配置为后端服务器的域名,以防止跨域问题的出现。 总结起来,Uniapp可以通过选择图片和视频文件,再通过uni.uploadFile方法将文件上传到后端服务器,实现H5手机上传图片和视频的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值