我本地的图片怎么上传上去?就是图片要弄地址?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我本地的图片怎么上传上去?就是图片要弄地址?相关的知识,希望对你有一定的参考价值。

不要qq空间,他会把图片尺寸变小。

“我本地的图片怎么上传上去?”不知道你想把图片上传到哪里,在哪儿上传?

“图片要弄地址?”我弄不清楚你问题的真实含义——是“把自己的图片上传,让图片带上网络地址”吗?

只能先一边猜着、一边试着回答你。也希望高手们都来回答你、帮助你。

1)如果本地图片上传到网络某处,并且显示出来的话,那就带有惟一的地址编码;如果是想把自己电脑里的图片弄成有地址的图片,那就必须先上传本地图片到网络上的某个区域(网站、论坛、空间或博客等);如果是在百度里,也要看在【百度产品】的哪个产品里:

2)如果在【百度知道】发图片,只有一种方式:上传本地图片,在自己电脑里找图片,不能引用有图片地址的网络图片;如果本地图片上传成功了,这张图片自然带有地址了。

3)如果在【百度贴吧】、【个人空间】,则在文章中既可以上传本地图片,也可以引用网络图片。

4)如果在【百度个人空间】的【相册】里,也只能上传本地图片,上传成功后,这张图片也自然带有地址了。

如果回答不准确,请谅解,如果还有问题或新的解释,请继续追问。追问

就是我想把图片弄到qq空间主页的模块,弄那个模块就要 图片 地址,我上传到QQ空间相册,虽然也有地址,不过 图片会变小。

追答

哦,QQ空间相册对本地上传或引用网络图片都受大小、尺寸限制。
你这张图片都超过了限制,QQ空间的相册最大支持1000×1000尺寸(你的图片是1360×764),大小不得超过2M(你的图片大小是2.17M)。
你可以先下载到电脑,把图片经过“适当”压缩后再上传,试一试、看看结果。

参考技术A 找个图床呗,上传后再修改图片大小就好了追问

我要把图片成为 qq空间的模块

追答

图床的图片可以借来用的

uni-app——小程序实现本地图片的上传以及身份证的智能识别

文章目录

  • 前言
  • 一、示例图
  • 二、实现过程
    • 1.完成提交图片的api地址
    • 2.获取本地图片
    • 3.将本地图片上传至开发者服务器
  • 具体实现代码
  • 四、身份证的智能识别
  • 总结


前言

上传本地图片的功能很常见,那么具体该如何实现呢?

一、示例图

二、实现过程

1.完成提交图片的api地址

提交图片同样也需要调用相应的api接口,所以,我们的首要任务就是确保提交图片的地址是可使用的

此时可以在项目文件的根目录下新建一个api文件 ,接着新建 index.js文件

index.js文件中:

// 公共地址
var baseURL = "https://meituan.thexxdd.cn/api";

// 图片上传接口
let IMAGEURL = baseURL + '/upload_picture';


// 将该对象暴露出去给其他文件使用
export 
	IMAGEURL,
	AICARD

公共地址

// 公共地址
var baseURL = "https://meituan.thexxdd.cn/api";
定义提交图片的地址
// 图片上传接口
let IMAGEURL = baseURL + '/upload_picture';

可以看到这里就是一个公共地址和提交图片地址的一个字符串拼接,这样提交图片的api地址就书写完成了,但是还是需要提交相应的参数,也就是你所要提交的图片地址,那么如何获取本地图片呢?这就需要查看uni-app的文档了,文档中有相应的api,只需要调用即可实现。

2.获取本地图片

#uni.chooseMedia(OBJECT)

拍摄或从手机相册中选择图片或视频。

官网地址:uni.chooseVideo(OBJECT) | uni-app官网

OBJECT 参数说明

参数名类型默认值必填说明
countNumber9(注意:ios不可大于9)最多可以选择的文件个数
mediaTypeArray.<string>['image', 'video']文件类型
sourceTypeArray.<string>['album', 'camera']图片和视频选择的来源
maxDurationNumber10拍摄视频最长拍摄时间,单位秒。时间范围为 3s 至 30s 之间
sizeTypeArray.<string>['original', 'compressed']仅对 mediaType 为 image 时有效,是否压缩所选文件
cameraString'back'仅在 sourceType 为 camera 时生效,使用前置或后置摄像头
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

OBJECT.mediaType 合法值

说明
image只能拍摄图片或从相册选择图片
video只能拍摄视频或从相册选择视频
mix可同时选择图片和视频

OBJECT.sourceType 合法值

说明
album从相册选择
camera使用相机拍摄

OBJECT.camera 合法值

说明
back使用后置摄像头
front使用前置摄像头

success 返回参数说明

参数名类型说明
tempFilesArray.<string>本地临时文件列表
typeString文件类型,有效值有 image 、video、mix

res.tempFiles 的结构

参数名类型说明
tempFilePathString本地临时文件路径 (本地路径)
sizeNumber本地临时文件大小,单位 B
durationNumber视频的时间长度
heightNumber视频的高度
widthNumber视频的宽度
thumbTempFilePathString视频缩略图临时文件路径
fileTypeString文件类型

fileType 合法值

说明
image图片
video视频

   用法示例:

/ 定义一个函数专门用来上传图片
// 参数说明:
// 1.图片上传的地址,
// 2.上传成功的说明
// 3.上传失败的说明
var upLoad = function(imageUrl, suc_desc, err_desc) 
	return new Promise((resolve, reject) => 
		uni.chooseMedia(
			count: 1,    //所要上传图片的数量
			mediaType: ['image'],   //所要上传文件的类型
			sourceType: ['album', 'camera'],    //所要上传文件的来源
			sizeType: ['original', 'compressed'],   //所要上传文件是否需要压缩
			success(res) 
				console.log(res.tempFiles)
			
		)
	)



// 暴露该函数
export 
	upLoad

3.将本地图片上传至开发者服务器

uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器,客户端发起一个 POST 请求,其中 content-type 为 multipart/form-data
如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器。

OBJECT 参数说明

参数名类型必填说明平台差异说明
urlString开发者服务器 url
filesArray是(files和filePath选其一)需要上传的文件列表。使用 files 时,filePath 和 name 不生效。App、H5( 2.6.15+)
fileTypeString见平台差异说明文件类型,image/video/audio仅支付宝小程序,且必填。
fileFile要上传的文件对象。仅H5(2.6.15+)支持
filePathString是(files和filePath选其一)要上传文件资源的路径。
nameString文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
headerObjectHTTP 请求 Header, header 中不能设置 Referer。
timeoutNumber超时时间,单位 msH5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
formDataObjectHTTP 请求中其他额外的 form data
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

注意

  • App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
  • hello uni-app中的客服反馈,支持多图上传。uni-app插件市场中也有多个封装的组件。
  • App平台选择和上传非图像、视频文件,参考uni-app 选择和上传非图像、视频文件 - DCloud问答
  • 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout
  • 支付宝小程序开发工具上传文件返回的http状态码为字符串形式,支付宝小程序真机返回的状态码为数字形式

files参数说明

files 参数是一个 file 对象的数组,file 对象的结构如下:

参数名类型必填说明
nameStringmultipart 提交时,表单的项目名,默认为 file
fileFile要上传的文件对象,仅H5(2.6.15+)支持
uriString文件的本地地址

Tip:

  • 如果 name 不填或填的值相同,可能导致服务端读取文件时只能读取到一个文件。

success 返回参数说明

参数类型说明
dataString开发者服务器返回的数据
statusCodeNumber开发者服务器返回的 HTTP 状态码

   用法示例:

uni.uploadFile(
					url: imageUrl, // 上传图片的接口地址
					filePath: tempFilePath,     //所要上传的图片地址
					name: 'file',   //所要上传的文件类型
					header: 
						accept: 'application/json'
					,
					success: (uploadFileRes) =>     //成功的回调函数
						console.log(uploadFileRes);
						resolve(uploadFileRes)
					
				);

三、具体实现代码

以上就是我们所要使用的api的用法讲解,接下来就到了如何利用该方法实现图片的上传啦,接下来我将通过一个案例实现。

步骤1  ——   封装提交图片的地址

关于这一步在文章开头已经描述,在这里不再赘述

api 文件夹下  ——  index.js文件

步骤2  ——    封装专门用来提交图片的函数

api 文件夹下  —— misc.js 文件

// 定义一个函数专门用来上传图片
// 参数说明:
// 1.图片上传的地址,
// 2.上传成功的说明
// 3.上传失败的说明
var upLoad = function(imageUrl, suc_desc, err_desc) 
	return new Promise((resolve, reject) => 
		uni.chooseMedia(
			count: 1, //所要上传图片的数量
			mediaType: ['image'], //所要上传文件的类型
			sourceType: ['album', 'camera'], //所要上传文件的来源
			sizeType: ['original', 'compressed'], //所要上传文件是否需要压缩
			success(res) 
				const tempFilePath = res.tempFiles[0].tempFilePath
				uni.uploadFile(
					url: imageUrl, // 上传图片的接口地址
					filePath: tempFilePath,     //所要上传的图片地址
					name: 'file',   //所要上传的文件类型
					header: 
						accept: 'application/json'
					,
					success: (uploadFileRes) =>     //成功的回调函数
						console.log(uploadFileRes);
						resolve(uploadFileRes)
					
				);
			
		)
	)



// 暴露该函数
export 
	upLoad

步骤3 —— 在所在的页面文件中引入以上步骤1和步骤2的方法

例如在  index.vue 中,在相应的添加图片点击事件中调用以上的方法即可

	// 添加图片的点击事件
			async addImage() 
				// 调用上传图片的函数并传入参数
				const result = await upLoad(IMAGEURL, '上传中', '上传失败');
				const image = JSON.parse(result.data).data;
				this.baseData.push(image);
			,

四、身份证的智能识别

学会了以上方法,关于身份证的智能识别就很简单啦,依旧可以采取上述步骤、调用相应的智能识别的接口,调用上述的uni-app中的api接口,之后将返回值赋值给对应的表单项即可,学会了吗?开干!

以上是关于我本地的图片怎么上传上去?就是图片要弄地址?的主要内容,如果未能解决你的问题,请参考以下文章

ecshop模版商城用ecshop助理上传淘宝数据包,怎么没有图片啊 ? 求解!

jquery怎么打开本地图片预览,点击确定后上传

我要在一个网页上传一张图片到服务器,然后保存图片的地址,在另一个页面显示图片

uni-app——小程序实现本地图片的上传以及身份证的智能识别

如何上传照片到网站?

怎么讲本地写好的含有图片的文档,一键发布到wordpress?