发送图片/拍照实现思路

弹出一个窗口, 选择图片,上传到服务器 获得一个链接地址 调用sendpicmsg方法开始发送流程

一、 界面处理技巧

  1. <input
  2. accept="image/gif,image/jpeg,,image/png"
  3. type="file"
  4. onchange="upload(this)"
  5. class='upload'/>

sendpicmsg方法开始发送流程

23、实现图片、拍照并发送 - 图1 23、实现图片、拍照并发送 - 图2

二、 upload前端实现

  1. function upload(dom){
  2. uploadfile("attach/upload",dom,function(res){
  3. if(res.code==0){//成功以后调用sendpicmsg
  4. vm.sendpicmsg(res.data)
  5. }
  6. })
  7. }
  8. function uploadfile(uri,dom,callback){
  9. //H5新特性
  10. var formdata = new FormData();
  11. //获得一个文件dom.files[0]
  12. formdata.append("file",dom.files[0])
  13. //formdata.append("filetype",".png")//.mp3指定后缀
  14. var xhr = new XMLHttpRequest();//ajax初始化
  15. var url = "http://"+location.host+"/"+uri;
  16. //"http://127.0.0.1/attach/upload"
  17. xhr.open("POST",url, true);
  18. //成功时候回调
  19. xhr.onreadystatechange = function() {
  20. if (xhr.readyState == 4 &&
  21. xhr.status == 200) {
  22. //fn.call(this, JSON.parse(xhr.responseText));
  23. callback(JSON.parse(xhr.responseText))
  24. }
  25. };
  26. xhr.send(formdata);
  27. }

三、 upload后端实现

做main.go中做文件上传的路由配置

23、实现图片、拍照并发送 - 图3

新建controller/attach.go文件

  1. package controller
  2. import (
  3. "fmt"
  4. "hello/util"
  5. "io"
  6. "math/rand"
  7. "net/http"
  8. "os"
  9. "strings"
  10. "time"
  11. )
  12. func init() {
  13. os.MkdirAll("./mnt", os.ModePerm)
  14. }
  15. func Upload(w http.ResponseWriter, r *http.Request) {
  16. UploadLocal(w, r)
  17. }
  18. // 1.存储位置 ./mnt,需要确保已经创建好
  19. // 2.url格式 /mnt/xxxx.png 需要确保网络能访问/mnt/
  20. func UploadLocal(writer http.ResponseWriter,
  21. request *http.Request) {
  22. //todo 获得上传的源文件s
  23. srcfile, head, err := request.FormFile("file")
  24. if err != nil {
  25. util.RespFail(writer, err.Error())
  26. }
  27. //todo 创建一个新文件d
  28. suffix := ".png"
  29. //如果前端文件名称包含后缀 xx.xx.png
  30. ofilename := head.Filename
  31. tmp := strings.Split(ofilename, ".")
  32. if len(tmp) > 1 {
  33. suffix = "." + tmp[len(tmp)-1]
  34. }
  35. //如果前端指定filetype
  36. //formdata.append("filetype",".png")
  37. filetype := request.FormValue("filetype")
  38. if len(filetype) > 0 {
  39. suffix = filetype
  40. }
  41. //time.Now().Unix()
  42. filename := fmt.Sprintf("%d%04d%s",
  43. time.Now().Unix(), rand.Int31(),
  44. suffix)
  45. dstfile, err := os.Create("./mnt/" + filename)
  46. if err != nil {
  47. util.RespFail(writer, err.Error())
  48. return
  49. }
  50. //todo 将源文件内容copy到新文件
  51. _, err = io.Copy(dstfile, srcfile)
  52. if err != nil {
  53. util.RespFail(writer, err.Error())
  54. return
  55. }
  56. //todo 将新文件路径转换成url地址
  57. url := "/mnt/" + filename
  58. //todo 响应到前端
  59. util.RespOk(writer, url, "")
  60. }
  61. // 即将删掉,定期更新
  62. const (
  63. AccessKeyId = "5p2RZKnrUanMuQw9"
  64. AccessKeySecret = "bsNmjU8Au08axedV40TRPCS5XIFAkK"
  65. EndPoint = "oss-cn-shenzhen.aliyuncs.com"
  66. Bucket = "winliondev"
  67. )
  68. // 权限设置为公共读状态
  69. // 需要安装
  70. func UploadOss(writer http.ResponseWriter,
  71. request *http.Request) {
  72. //todo 获得上传的文件
  73. //todo 获得文件后缀.png/.mp3
  74. //todo 初始化ossclient
  75. //todo 获得bucket
  76. //todo 设置文件名称
  77. //todo 通过bucket上传
  78. //todo 获得url地址
  79. url := ""
  80. //todo 响应到前端
  81. util.RespOk(writer, url, "")
  82. }

存储到本地

  1. func UploadLocal(writer http.ResponseWriter,
  2. request * http.Request){
  3. }

一定要新建mnt文件夹哦,用来存放文件

23、实现图片、拍照并发送 - 图4

在配置一下可以访问到本地的图片url

23、实现图片、拍照并发送 - 图5

四、存储到alioss

  1. func UploadLocal(writer http.ResponseWriter,
  2. request * http.Request){
  3. }

如何安装 golang.org/x/time/rate

cd $GOPATH/src/golang.org/x/ git clone https://github.com/golang/time.git time

五、进行测试

23、实现图片、拍照并发送 - 图6

可以正常发图片,拍照的话在pc端也是选择图片,到手机端就好了