uniapp上传图片至服务器,获得在线图片链接预览(实战)

uniapp上传图片至服务器,获得在线图片链接预览(实战),第1张

功能需求:

前端选择本地文件,将选择好的文件显示在界面上进行预览,可同时选择四张进行预览。

思路如下:

前端选择本地的png、jpg、等格式的图片,将图片以二进制的形式传到后端服务器,后端对二进制图片进行处理,返回给前端一个服务器链接在线图片,在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。

首先

我们看一下uniapp的官方文档:

https://uniapp.dcloud.io/api/media/image?id=chooseimage

大概是这样的

先写一个模拟的demo

1:首先我是是用了colorUI的框架,在项目里面引入

在page底下的vue文件引入

这样一来,就不需要写什么样式了,直接使用写好的就行了。

效果是这样的

每次选完图片之后显示在页面上,我这里设置了最多可以选择四张,图片链接使用了临时的blob,接下来就要使用后端小伙伴给的接口,将自己本地的二进制文件传给他了。

在 chooseImage 选择好图片之后,写一个成功的回调函数,在回到函数里面添加一个图片上传的方法uploadFile,在方法里面添加url,等参数。

若是请求成功

则返回一个图片链接

添加接口之后 的,demo如下:

File Upload组件啊,是同步还是异步呢

html部分:

<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">

文件引入:

<link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"><script type="text/javascript" src="diyUpload/js/diyUpload.js"></script>

HTML部分:

<div id="demo"> <div id="as" ></div></div>

JS部分:

<script type="text/javascript">

/** 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯* 其他参数同WebUploader*/

$('#as').diyUpload({

url:'server/fileupload.php',

success:function( data ) {

console.info( data ) },

error:function( err ) {

console.info( err )

},

buttonText : '选择文件',chunked:true,// 分片大小

chunkSize:512 * 1024,//最大上传的文件数量, 总文件大小,单个文件大小(单位字节)

fileNumLimit:50,

fileSizeLimit:500000 * 1024,

fileSingleSizeLimit:50000 * 1024,

accept: {}})

</script>


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/288351.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-23
下一篇2023-04-23

发表评论

登录后才能评论

评论列表(0条)

    保存