uni-app实现上传图片或者文件(直接上代码)-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app实现上传图片或者文件(直接上代码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

配置Tomcat

1.1、添加upload文件夹

在webapps\Root文件夹下创建用于接收上传文件的upload文件夹

1.2、修改conf\web.xml设置允许上传文件

		<init-param>
            <param-name>readonly</param-name>
            <param-value>false</param-value>
        </init-param>

1.3、修改conf\server.xml设置端口号,避免跟springboot冲突

<Connector port="8060" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443"  URIEncoding="UTF-8"/>

二、uni-app代码:

               //_self为在export default外面作用域外定义的全局变量,用来等价代换
				_self = this;
				//第一步:打开手机相册或者文件管理器选择文件
				uni.chooseImage({
					count:1,//允许上传一张图片
					sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有
					sourceType:['album'],//从相册选择
					success:function(res){
						//获得选择好的文件,就算只有一个文件也是数组
						const tempFilePaths = res.tempFilePaths;
						
						//第二步:把选择的文件上传到服务器
						const uploadTask = uni.uploadFile({
							url:'http://localhost:8070/upload/file',//后端接口url
							filePath:tempFilePaths[0],
							name:'fileName',//和后端接口需要的参数名一致
							success: (res) => {
								console.log("图片路径为:"+res.data)
								_self.formData.logoPath=res.data//获取到图片路径
							}
						})
						//获取文件的上传进度
						uploadTask.onProgressUpdate(function(res){
							console.log('上传进度:'+res.progress)
							console.log('已经上传的数据长度:'+res.totalBytesSent)
							console.log('预计需要上传的数据总长度:'+res.totalBytesExpectedToSend)
						})
					}
				})

如果是文件:

上传文件方法也可以上传图片,只需要把extension中改为图片对应为后缀名即可

	 _self = this;
				uni.chooseFile({
					
					//第一步:选择文件
				  count: 1, //默认100
				  extension:['.pdf','.doc','.xlsx','.docx','.xls'],
					success: function (res) {
						const tempFilePaths = res.tempFilePaths;//若果只选择一个文件,这个文件就是数组的第一个元素
						//第二步:把选择的文件上传到服务器
						uni.uploadFile({
							url:'http://localhost:8070/upload/file',
							filePath:tempFilePaths[0],
							name:'fileName',
							success: (res) => {
								console.log(res.data)
								 _self.formData.attachmentpath = res.data
							}
							
						})
					}
				})
			}

三、spring boot代码:

 JesyFileUpload工具类:

  /**
     * 上传文件
     *
     * @param file --文件名
     * @param serverUrl --服务器路径http://127.0.0.1:8080/ssm_image_server
     * @return
     * @throws IOException
     */
    public static String uploadFile(MultipartFile file, String serverUrl) throws IOException {
        //重新设置文件名
        String newFileName = new Date().getTime()+""; //将当前时间获得的毫秒数拼接到新的文件名上
        //随机生成一个3位的随机数
        Random r = new Random();
        for(int i=0; i<3; i++) {
            newFileName += r.nextInt(10); //生成一个0-10之间的随机整数
        }

        //获取文件的扩展名
        String orginalFilename = file.getOriginalFilename();
        String suffix = orginalFilename.substring(orginalFilename.indexOf("."));

        //创建jesy服务器，进行跨服务器上传
        Client client = Client.create();
        //把文件关联到远程服务器
        //例如：http://127.0.0.1:8080/ssm_image_server/upload/123131312321.jpg
        WebResource resource = client.resource(serverUrl+"/"+newFileName+suffix);
        //上传
        //获取文件的上传流
        resource.put(String.class, file.getBytes());

        //图片上传成功后要做的事儿
        //1、ajax回调函数做图片回显（需要图片的完整路径）
        //2、将图片的路径保存到数据库（需要图片的相对路径）
//        String fullPath = serverUrl+"/upload/"+newFileName+suffix; //全路径
        String relativePath = "/upload/"+newFileName+suffix; //相对路径

        return relativePath;
    }

controller:文章来源地址https://www.toymoban.com/news/detail-504820.html

@RestController
@RequestMapping("/upload")
@CrossOrigin(origins = "*")
public class UploadController {
    @PostMapping("/file")
    public String upload(MultipartFile fileName) {
        String path = "";
        try {
            path=JesyFileUploadUtil.uploadFile(fileName, "http://localhost:8060/upload");//"http://localhost:8060/upload"为文件服务器访问路径,这里用的是用Tomcat
        } catch (IOException e) {
            e.printStackTrace();
        }
        return path;
    }
}

到了这里，关于uni-app实现上传图片或者文件(直接上代码)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！